Mappa di un blog su Blogger per post, etichette e parole chiave.

Mappa del sito per i lettori con i post elencati in ordine di pubblicazione, di etichetta e di parole chiave con le relative miniature.

Le sitemap del blog inviate a Google servono per indicizzare meglio e più velocemente il nostro sito mentre le mappe del blog a disposizione dei lettori hanno la funzione altrettanto importante di presentare al meglio tutti i contenuti del nostro sito per farli rimanere più a lungo in modo da aumentare il tempo medio di permanenza e di diminuire la frequenza di rimbalzo che sono parametri molto importanti in ottica SEO per il posizionamento degli articoli del sito.

Dopo aver presentato una mappa del sito testuale, una mappa del sito per etichetta e una mappa del sito con miniature vada a presentare un compendio di tutte queste opzioni. Si tratta infatti di pubblicare una pagina statica con mirati strumenti di ricerca per i lettori che potranno non solo visualizzare tutti i contenuti ma anche effettuare delle ricerche visive molto più efficaci di quelle classiche

Nella parte alta del layout saranno visualizzate le opzioni:

1. Ordina gli articoli per data - Si potrà scegliere tra ULTIMI ARTICOLI e AGGIORNAMENTI. Nel primo caso saranno elencati tutti i post con relative miniature a partire dall'ultimo pubblicato mentre nel secondo caso saranno elencati gli ultimi articoli che sono stati aggiornati.
   
2. Filtra i post per etichette - Si aprirà un menù verticale con l'elenco di tutte le categorie presenti nel blog. Il lettore potrà selezionarne una per vedere elencati tutti i post che la contengono
   
3. Ricerca per parole chiave - Si potrà digitare una parola chiave e pigiare su Invio per visualizzare l'elenco di tutti i post che le siano pertinenti.

Di default vengono visualizzati solo 30 elementi ma il lettore potrà cliccare su Post Successivi ▼ per visualizzarne altri 30 e così via. Il numero 30 può essere modificato

Per la creazione di questa eccellente mappa del sito si va su Pagine > Nuova Pagina > Pagina vuota e si clicca su HTML accanto a Scrivi. Nell'Editor si incolla questo codice

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<br /></div>
<style type="text/css">
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #cbe5fd;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#cbe5fd;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #cbe5fd;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#cbe5fd;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #cbe5fd;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#cbe5fd;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:##cbe5fd;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#cbe5fd;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#cbe5fd;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909;
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type="text/javascript">
//<![CDATA[
var tocConfig = {
url: "http://nuovo-blog-di-prova.blogspot.com",
feedNum: 30,
labelName: false,
numChars: 0,
thumbWidth: 80,
navText: "Post Successivi ▼",
frontText: "Post Precedenti ▲",
resetToc: "Reset",
noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEPJdmHRpmC2nTTLpWYBpP-j9xOk1LyQrgSgq7wPjYnikK2HQ0CRYpEbNdy49YjlBlc2OsVUiMDvEZjuTtSyLSrwILPaP3LLeApB7df49GroBNrH4H9DDowuviibBQFDH4igFC4-Er8pI/s425/bottone-blog.png",
loading: "<span>Sto caricando ...</span>",
searching: "<span>Ricerca ...</span>",
noResult: "Non ci sono risultati con questa query"
};
//]]>
</script>
<br />
<div id="table-outer">
<table border="0">
        <tbody>
<tr>
                <td><label for="orderFeedBy">ORDINA GLI ARTICOLI PER DATA:</label>
                </td>
                <td><select id="orderFeedBy">
                        <option selected="" value="published">ULTIMI ARTICOLI</option>
                        <option value="updated">AGGIORNAMENTI</option>
                    </select>
                </td>
            </tr>
<tr>
                <td><label for="labelSorterSelect">FILTRA I POST PER ETICHETTE:</label>
                </td>
                <td><span id="labelSorter"><select disabled="" id="labelSorterSelect"><option selected="">CERCA...</option></select></span>
                </td>
            </tr>
<tr>
                <td><label for="feed-q-box">RICERCA PER PAROLE CHIAVE:</label>
                </td>
                <td><form id="postSearcher">
<input id="feed-q-box" type="text" />
                    </form>
</td>
            </tr>
</tbody>
    </table>
</div>
<br />
<header id="resultDesc"></header>
<br />
<ul id="feedContainer"></ul>
<div id="feedNav">
</div>
<script src="https://sites.google.com/site/progetto3322/archivio/mappa-sito.js" type="text/javascript"></script></div>

Si pubblica la pagina. Oltre alla personalizzazione dei codici dei colori possono essere modificate le espressioni visualizzate nella mappa del sito. È necessario sostituire l'URL del nostro sito a quello del blog di prova che ho usato come test

Gli altri parametri più importanti riguardano l'URL della immagine visualizzata di default quando non ce ne fossero nel post e il numero di articoli visualizzati per volta (30). I possessori di un blog con dominio personalizzato dovranno scaricare il file javascript evidenziato di giallo incollandone l'URL nel browser e cliccando su Invio. Tale file dovrà essere caricato nella cartella Public di Dropbox o su un dominio personale per poi ottenerne l'URL diretto da sostituire nel codice.

Fonte | DHF Web -