Blogger Book

Gli indici , noti anche come mappe del sito , consentono ai visitatori di navigare tra tutti i contenuti di un sito in modo pratico. Nel nostro caso, possono accedere ai tag del blog e ai rispettivi post pubblicati.

Ne abbiamo già visti un paio , ma questo mi piace particolarmente per il modo in cui tutto è organizzato in schede, come una visualizzazione a schede . Questo rende il design più intuitivo per l'utente e include anche diverse opzioni che lo rendono più completo.

Come creare un indice (Sitemap) con schede.

Questo indice è opera di Taufik Nurrohman , un genio indonesiano specializzato in temi per Blogger. Non richiede librerie esterne, quindi non dovremo praticamente preoccuparci della compatibilità.

Potete vedere la demo proprio qui. Sul lato sinistro ci sono i tag del blog; cliccando su uno di essi vengono visualizzati i post corrispondenti a quel tag sulla destra.

Caricamento post in corso...

Questi indici vengono solitamente visualizzati su una pagina statica, quindi inseriremo tutto il codice all'interno della pagina, inclusi gli stili per impedire che vengano caricati in altre parti del blog in cui la mappa del sito non verrà visualizzata. 

Ecco il codice che ti serve.

Per inserire questo indice (mappa del sito) sul tuo blog, crea una pagina e, nella scheda HTML , incolla questo codice:

<style>
#SiteMapBlogger {
width:99%;
margin:0 self;
background-color:#444; /* Colore della barra laterale */
overflow:hidden;
position:relative;
color:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
padding:5px 10px;
font:normal bold 10px Arial, Sans-Serif;
color:#FFF
}
#SiteMapBlogger ul, #SiteMapBlogger ol, #SiteMapBlogger li {margin:0;padding:0;list-style:none;background:none;}
#SiteMapBlogger .sitemapTabs {width:20%;float:left}
#SiteMapBlogger .sitemapTabs li a {
display:block;
font:normal bold 10px/28px Arial,Sans-Serif;
height:28px;
overflow:hidden;
text-overflow:ellipsis;
color:#ccc; /* Colore etichetta */
text-transform:uppercase;
text-decoration:none;
padding:0 12px;
cursor:pointer
}
#SiteMapBlogger .sitemapTabs li a:hover {
background-color:#556270; /* Colore di sfondo delle etichette al passaggio del mouse */
color:#FFF
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#69D2E7; /* Colore della scheda attiva */
color:#FFF; /* Colore del testo della scheda attiva */
position:relative;
z-index:5;
margin:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
width:80%;
float:right;
background-color:#FFF;
border-left:5px solid #69D2E7; /* Colore del bordo che separa le voci dalle etichette */
box-sizing:border-box
}
#SiteMapBlogger .divider-layer {float:none;display:block;position:absolute;top:0;right:0;bottom:0;}
#SiteMapBlogger .panel {position:relative;z-index:5;font:normal normal 10px Arial,Sans-Serif}
#SiteMapBlogger .panel li a {
display:block;
position:relative;
font-weight:700;
font-size:11px; /* Dimensioni titolo post */
color:#333; /* Colore titolo voce */
line-height:30px;
height:30px;
padding:0 12px;
text-decoration:none;
outline:none;
overflow:hidden
}
#SiteMapBlogger .panel li time {
display:block;
font-style:italic;
font-weight:400;
font-size:10px; /* Dimensioni data */
color:#DCDCDC; /* Colore data */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
padding:10px 12px;
font-style:italic;
overflow:hidden
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
display:block;
margine:0 8px 0 0;
padding:4px;
larghezza:72px; /* Larghezza del contenitore delle miniature */
altezza:72px; /* Altezza del contenitore delle miniature */

@media (max-width:700px) {
#SiteMapBlogger {
background-color:#fff;
border:0 solid #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:hidden;
width:auto;
float:none;
display:block
}
#SiteMapBlogger .sitemapTabs li {
display:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
color:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
color:#fff
}
#SiteMapBlogger .sitemapContent {
border:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li time {
display:none
}
}
< /style>
< div id="SiteMapBlogger">
< span class="loadingPosts">Caricamento post...</span></div>
< br />
< script>
var tabbedTOC = {
blogUrl: "http:// nome-del-mio-blog .blogspot.com/",
containerId: "SiteMapBlogger",
activeTab: 1,
showDates: true,
showSummaries: false,
numChars: 200,
showThumbnails: false,
thumbSize: 40,
noThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLry ssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/imagen.png",
monthNames: ["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],
newTabLink: true,
maxResults: 99999,
preload: 0,
sortAlphabetically: true,
showNew: 7,
newText: " - <i style='color:red;'>Novità!</i>"
};
< /script>

<script>
/*
* Widget indice dei contenuti in stile a schede di Blogger di Taufik Nurrohman
* Modifiche gratuite, ma mantieni l'attribuzione originale.

* URL: https://plus.google.com/108949996304093815163 */

Come personalizzare il widget. 

Il nome del tuo blog appare in rosso . Nell'area Stili, vedrai un'area verde dove puoi personalizzare l'aspetto.

Ora passiamo alle opzioni di questo gadget. Queste opzioni si trovano nel codice che hai aggiunto:

activeTab è la scheda predefinita
showDates passa a false per nascondere la data
showSummaries passa a true per mostrare i riepiloghi
numChars numero di caratteri nel riepilogo
showThumbnails passa a true per mostrare le miniature per i post
thumbSize dimensione della miniatura
noThumb miniatura predefinita per i post che non hanno un'immagine
monthNames è il nome dei mesi quando viene visualizzata la data
newTabLink passa a true per aprire i post in una nuova scheda
sortAlphabetically passa a false per ordinare i post per data
showNew passa a false per nascondere il testo "Nuovo!" che appare nei post recenti o definire quanti post recenti avranno quel testo
newText è il testo "Nuovo!" per i post recenti

Sebbene questo gadget offra la possibilità di visualizzare i riepiloghi dei post con le rispettive miniature, si consiglia di non attivare nessuna delle due opzioni per evitare rallentamenti nel caricamento. È inoltre importante, una volta aggiunto il codice, non passare alla scheda Componi.

Mappa del sito responsive. 

Questa mappa del sito è responsive , il che significa che si adatta alle dimensioni del contenitore e cambia forma quando viene visualizzata da un dispositivo mobile, ad esempio. Per questo motivo, sotto @media (larghezza massima: 700px), troverete altri stili; si tratta degli stili per la modalità "piccola" della mappa del sito.

Questo indice, o mappa del sito, mi sembra uno dei più completi che abbiamo visto finora, in quanto offre diverse opzioni che possiamo configurare per dargli l'aspetto desiderato. E soprattutto, non dipenderemo da librerie o script esterni; tutto è in un unico codice pronto per essere copiato e incollato.

Fonte