Gli indici , chiamati anche mappe del sito , consentono ai visitatori di navigare in modo pratico tra tutti i contenuti del sito, nel nostro caso accedendo 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 è organizzato tutto, in schede, tipo tabview , il che gli conferisce un design più intuitivo per l'utente, e include anche diverse opzioni che lo rendono più completo.
Questo indice è frutto dell'ingegno di Taufik Nurrohman , un genio indonesiano esperto in questi argomenti di 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, sul lato destro, i post corrispondenti a quel tag.
Caricamento post in corso...
Questi indici vengono solitamente visualizzati su una pagina statica, quindi inseriremo tutto il codice all'interno della pagina, compresi gli stili, per evitare che vengano caricati in altre parti del blog in cui la mappa del sito non verrà visualizzata.
Per inserire questo indice -sitemap- sul tuo blog, crea una pagina e nella scheda HTML della pagina, incolla questo codice:
<style>
#SiteMapBlogger {
larghezza:99%;
margine:0 automatico;
colore di sfondo:#444; /* Colore della barra laterale */
overflow:hidden;
posizione:relativa;
colore:#333
}
#SiteMapBlogger .loadingPosts {
display:block;
imbottitura:5px 10px;
font: grassetto normale 10px Arial, Sans-Serif;
colore:#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: grassetto normale 10px/28px Arial,Sans-Serif;
altezza:28px;
overflow:nascosto;
testo-overflow:ellissi;
colore:#ccc; /* Colore etichetta */
text-transform:uppercase;
decorazione-testo:nessuno;
imbottitura:0 12px;
cursore:puntatore
}
#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;
indice z:5;
margine:0 -1px 0 0
}
#SiteMapBlogger .sitemapContent, #SiteMapBlogger .divider-layer {
larghezza:80%;
galleggiante:destra;
colore di sfondo:#FFF;
bordo-sinistro:5px solido #69D2E7; /* Colore del bordo che separa i post 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;
posizione:relativa;
peso del carattere:700;
dimensione carattere:11px; /* Dimensione titolo post */
color:#333; /* Colore del titolo della voce */
line-height:30px;
altezza:30px;
imbottitura:0 12px;
decorazione-testo:nessuno;
contorno:nessuno;
overflow:nascosto
}
#SiteMapBlogger .panel li time {
display:block;
stile carattere:corsivo;
peso del carattere:400;
dimensione carattere:10px; /* Dimensione data */
colore:#DCDCDC; /* Colore data */
float:right
}
#SiteMapBlogger .panel li .sitemapSummary {
display:block;
imbottitura:10px 12px;
stile carattere:corsivo;
overflow:nascosto
}
#SiteMapBlogger .panel li .sitemapSummary img.sitemapThumbnail {
float:left;
visualizza:blocco;
margine:0 8px 0 0;
imbottitura:4px;
larghezza:72px; /* Larghezza del contenitore delle miniature */
altezza:72px; /* Altezza del contenitore delle miniature */
bordo:1px solido #dcdcdc; /* Bordo miniatura */
}
#SiteMapBlogger .panel li:nth-child(even) {
background-color:#CBDFDE; /* Colore di sfondo secondario delle voci */
font-size:10px;
color:#414141 /* Colore del testo secondario per i post */
}
#SiteMapBlogger .panel li a:hover,#SiteMapBlogger .panel li a:focus, #SiteMapBlogger .panel li a:hover time, #SiteMapBlogger .panel li.bold a {
background-color:#556270; /* Colore di sfondo del titolo del post (modalità riepilogo) e colore di sfondo del titolo del post al passaggio del mouse (modalità normale) */
color:#FFF;
outline:none
}
#SiteMapBlogger .panel li.bold a:hover, #SiteMapBlogger .panel li.bold a:hover tempo {
colore-sfondo:#444
}
@media (larghezza-massima:700px) {
#SiteMapBlogger {
colore-sfondo:#fff;
bordo:0 solido #888
}
#SiteMapBlogger .sitemapTabs, #SiteMapBlogger .sitemapContent {
overflow:nascosto;
larghezza:auto;
float:nessuno;
visualizzazione:blocco
}
#SiteMapBlogger .sitemapTabs li {
visualizzazione:inline;
float:left
}
#SiteMapBlogger .sitemapTabs li a, #SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#556270;
colore:#ccc;
}
#SiteMapBlogger .sitemapTabs li a.active-tab {
background-color:#CBDFDE;
colore:#fff
}
#SiteMapBlogger .sitemapContent {
bordo:none
}
#SiteMapBlogger .divider-layer, #SiteMapBlogger .panel li tempo {
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/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_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 a schede di Blogger di Taufik Nurrohman
* Modificabile liberamente, ma mantenendo l'attribuzione originale.
*URL: https://plus.google.com/108949996304093815163 */
funzione clickTab(e){var t=document.getElementById(tabbedTOC_defaults.containerId),n=t.getElementsByTagName("ol"),r=t.getElementsByTagName("ul")[0],i=r.getElementsByTagName("a");for(var s=0;s<n.length;s++){n[s].style.display="none";n[parseInt(e,10)].style.display="block"}for(var o=0;o<i.length;o++){i[o].className="";i[parseInt(e,10)].className="active-tab"}}funzione showTabs(e){var t=parseInt(e.feed.openSearch$totalResults.$t,10),n=tabbedTOC_defaults,r=e.feed.entry,i=e.feed.category,s="",o=[];for(var u=0;u<(n.showNew===true?5:n.showNew);u++){if(u==r.length)break;r[u].title.$t=r[u].title.$t+(n.showNew!==false?n.newText:"")}r=n.sortAlphabetically?r.sort(function(e,t){return e.title.$t.localeCompare(t.title.$t)}):r;i=n.sortAlphabetically?i.sort(function(e,t){return e.term.localeCompare(t.term)}):i;s='<span <translation>class="divider-layer"></span><ul class="sitemapTabs">';for(var a=0,f=i.length;a<f;a++){s+='<li class="sitemapItem-'+a+'"><a href="javascript:clickTab('+a+');">'+i[a].term+"</a></li>"}s+="</ul>";s+='<div class="sitemapContent">';for(var l=0,c=i.length;l<c;l++){s+='<ol class="panel" data-category="'+i[l].term+'"';s+=l!=n.activeTab-1?' style="display:none;"':"";s+=">";for(var h=0;h<t;h++){if(h==r.length)break;var p,d=r[h],v=d.published.$t,m=n.monthNames,g=d.title.$t,y="summary"in d&&n.showSummaries===true?d.summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,n.numChars)+"…":"",b="media$thumbnail"in d&&n.showThumbnails===true?'<img class="sitemapThumbnail" stile="larghezza:'+n.thumbSize+"px;altezza:"+n.thumbSize+'px;" alt="" src="'+d.media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>':'<img class="sitemapThumbnail" style="width:'+n.thumbSize+"px;height:"+n.thumbSize+'px;" alt="" src="'+n.noThumb.replace(/\/s72(\-c)?\//,"/s"+n.thumbSize+"-c/")+'"/>',w=d.category?d.category:[],E=n.showDates?'<time datetime="'+v+'" title="'+v+'">'+v.substring(8,10)+" "+m[parseInt(v.substring(5,7),10)-1]+" "+v.substring(0,4)+"</time>":"";for(var S=0;S<d.link.length;S++){if(d.link[S].rel=="alternate"){p=d.link[S].href;break}}for(var x=0,T=w.length;x<T;x++){var N=n.newTabLink? destinazione="_blank"':"";se(w[x].term==i[l].termine){s+='<li title="'+w[x].term+'"';s+=n.mostraRiepiloghi?' class="bold"':"";s+='><a href="'+p+'"'+N+">"+g+E+"</a>";s+=n.showSummaries?'<span class="sitemapSummary">'+b+y+'<span style="display:block;clear:both;"></span></span>':"";s+="</li>"}}}s+="</ol>"}s+="</div>";s+='<div style="clear:both;"></div>';document.getElementById(n.containerId).innerHTML=s;clickTab(n.activeTab-1)}var tabbedTOC_defaults={blogUrl:"http://www.ciudadblogger",containerId:"SiteMapBlogger",activeTab:1,showDates:false,showSummaries:false,numChars:200,showThumbnails:false,thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUdg3t5QndWsLryssJdFZSv4wNBotT 4P2xv8r0_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:false,newText:" - <em style='color:red;'>Nuovo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="non definito"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUDG3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/ image.png",monthNames:["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>Nuovo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()thumbSize:40,noThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tzqLIUCQDt87ntTDS9KQYvokS6rInYJLMUDG3t5QndWsLryssJdFZSv4wNBotT4P2xv8r0_YHrPzhmNfwFex0a6MjWHh7427NMVRlW8-ZzHtuYk7ROIuwmtU7DV-FHRK8Ck81xoRMe4/s128/ image.png",monthNames:["Gennaio","Febbraio","Marzo","Aprile","Maggio","Giugno","Luglio","Agosto","Settembre","Ottobre","Novembre","Dicembre"],newTabLink:true,maxResults:99999,preload:0,sortAlphabetically:true,showNew:false,newText:" - <em style='color:red;'>Nuovo!</em>"};for(var i in tabbedTOC_defaults){tabbedTOC_defaults[i]=typeof tabbedTOC[i]!==undefined&&typeof tabbedTOC[i]!=="undefined"?tabbedTOC[i]:tabbedTOC_defaults[i]}(function(){var e=document.getElementsByTagName("head")[0],t=document.createElement("script");t.type="text/javascript";t.src=tabbedTOC_defaults.blogUrl+"/feeds/posts/summary?alt=json-in-script&max-results="+tabbedTOC_defaults.maxResults+"&orderby=published&callback=showTabs";if(tabbedTOC_defaults.preload!=="onload"){setTimeout(function(){e.appendChild(t)},tabbedTOC_defaults.preload)}else{window.onload=function(){e.appendChild(t)}}})()
</copione>
Dove è in rosso va il nome del tuo blog. Nell'area stili vedrai in verde dove potrai personalizzare l'aspetto.
Passiamo ora 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 dei 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 cambia in true per aprire le voci in una nuova scheda
sortAlphabetically cambia in false per ordinare le voci per data
showNew cambia in false per nascondere la dicitura "Nuovo!" testo che appare nei post recenti o definisce quanti post recenti conterranno quel testo
newText è il testo "Nuovo!" dalle voci recenti
Sebbene questo gadget offra la possibilità di visualizzare riepiloghi delle voci con le rispettive miniature, si consiglia di non attivare nessuna delle due opzioni per evitare un caricamento lento. È inoltre importante che una volta inserito il codice non si passi alla scheda Componi .
Questa mappa del sito è reattiva , ovvero si adatta alle dimensioni del contenitore e cambia forma quando viene visualizzata, ad esempio, da un dispositivo mobile. Per questo motivo, sotto @media (max-width:700px) vedrai altri stili; Questi sono gli 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, poiché offre varie opzioni che possiamo configurare per dargli l'aspetto che desideriamo. E la cosa migliore è che non dovremo dipendere da librerie o script esterni; tutto è in un unico codice pronto per essere copiato e incollato.
Commenti
Posta un commento