Widget delle Etichette più popolari da mostrare in una pagina statica di Blogger.

Come installare in una pagina statica di Blogger il widget delle Etichette più Popolari con i link agli ultimi post con titoli e miniature.

Come certo saprete Google invita gli webmaster non solo a creare una sitemap per i motori di ricerca ma anche una Mappa del sito per i lettori. Per sitemap ad uso dei navigatori si intende un widget o una pagina da cui sia possibile scorrere i titoli di tutti i contenuti che abbiamo pubblicato.

Queste mappe del sito sono solitamente organizzate per etichette e qualcuna di esse mostra anche le miniature delle immagini dei post. Con questo widget vogliamo effettuare una scelta e mostrare solo i post che si riferiscono a determinate etichette. Possiamo per esempio mostrare gli ultimi post di 8 etichette oppure di 10 o di 12. Questo dipende anche dalla larghezza della pagina statica in cui viene inserito il widget che comunque come saprete potrà essere modificata.

L'aspetto del widget con 12 etichette mostrate su 4 colonne è il seguente

Il numero di colonne muterà in funzione della larghezza disponibile nel layout. In ciascuna colonna vengono mostrati 4 post con il pulsante More per aprire la pagina del post che contiene quella etichetta. Tale pagina ha come è noto questo indirizzo generico

http://nomeblog.blogspot.com/search/label/etichetta

con nomeblog e etichetta che sono ovviamente da modificare. Per la sua installazione si va su Bacheca -> Pagine -> Nuova Pagina, si digita il titolo della pagina nell'Editor di Blogger quindi in HTML senza tornare su Scrivi si incolla questo codice

<style type="text/css" scoped="scoped">
#feed-list-container{margin-top:0px}
.list-entries{background:white;border:1px solid #d8d8d8}.list-entries ul,.list-entries li{margin:0;padding:0;list-style:none}.list-entries li{padding:1em;border-bottom:1px solid #ddd}.list-entries .main-title{padding:0}.list-entries .main-title h4{display:block;font:inherit;font-weight:bold;padding:.5em 1em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:14px;margin-top:0 !important}.list-entries .title a{font-weight:300;font-size:14px;text-decoration:none;line-height:.5em;color:#222}.list-entries .title a:hover{text-decoration:underline;color:#5886a7}.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}.list-entries .summary{overflow:hidden;color:#999}.list-entries .more-link{border-bottom:none;}.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#82b965;padding:.5em 1em;position:relative;font-weight:bold;color:white}.list-entries .more-link a:after{content:"";width:0;height:0;position:absolute;top:50%;right:.3em;border:4px solid transparent;border-left-color:white;margin-top:-4px}.list-entries .more-link a:hover{background-color:#71a555}
.list-entries {
margin:5px;
width:260px; /* Larghezza delle colonne */
float:left;
font-size:11px;
}</style>
<div id="feed-list-container"></div>
<script type="text/javascript">
var multiFeed = {
feedsUri: [{
name: "BLOGGER",
url: "http://www.ideepercomputeredinternet.com",
tag: "blogger" }, {
name: "WIDGET",
url: "http://www.ideepercomputeredinternet.com",
tag: "widget" }, {
name: "IMMAGINI",
url: "http://www.ideepercomputeredinternet.com",
tag: "immagini" }, {
name: "SLIDESHOW",
url: "http://www.ideepercomputeredinternet.com",
tag: "slideshow" },{
name: "YOUTUBE",
url: "http://www.ideepercomputeredinternet.com",
tag: "youtube" }, {
name: "GOOGLE",
url: "http://www.ideepercomputeredinternet.com",
tag: "google" }, {
name: "TEMPLATE",
url: "http://www.ideepercomputeredinternet.com",
tag: "modello" }, {
name: "FACEBOOK",
url: "http://www.ideepercomputeredinternet.com",
tag: "facebook" }, {
name: "TWITTER",
url: "http://www.ideepercomputeredinternet.com",
tag: "twitter" },{
name: "WHATSAPP",
url: "http://www.ideepercomputeredinternet.com",
tag: "twitter" },{
name: "MENU",
url: "http://www.ideepercomputeredinternet.com",
tag: "twitter" },{
name: "ANDROID",
url: "http://www.ideepercomputeredinternet.com",
tag: "android" } ],
numPost: 4,
showThumbnail: true,
showSummary: true,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "More",
endParam: "?max-results=8" }};
</script>
<script type='text/javascript'>
//<![CDATA[     
var mf_defaults={feedsUri:[{name:"Posting JQuery",url:"http://www.ideepercomputeredinternet.com",tag:"JQuery"},{name:"Posting CSS",url:"http://www.ideepercomputeredinternet.com",tag:"CSS"},{name:"Widget-Widget Blogger",url:"http://www.ideepercomputeredinternet.com",tag:"Widget"}],numPost:4,showThumbnail:true,showSummary:true,summaryLength:80,titleLength:"auto",thumbSize:72,newTabLink:false,containerId:"feed-list-container",listClass:"list-entries",readMore:{text:"More",endParam:"?max-results=20"},autoHeight:false,current:0,onLoadFeed:function(a){},onLoadComplete:function(){},loadFeed:function(c){var d=document.getElementsByTagName("head")[0],a=document.getElementById(this.containerId),b=document.createElement("script");b.type="text/javascript";b.src=this.feedsUri[c].url+"/feeds/posts/summary"+(this.feedsUri[c].tag?"/-/"+this.feedsUri[c].tag:"")+"?alt=json-in-script&max-results="+this.numPost+"&callback=listEntries";d.appendChild(b)}};for(var i in mf_defaults){mf_defaults[i]=(typeof(multiFeed[i])!==undefined&&typeof(multiFeed[i])!=="undefined")?multiFeed[i]:mf_defaults[i]}function listEntries(q){var p=q.feed.entry,c=mf_defaults,h=document.getElementById(c.containerId),a=document.createElement("div"),d="<ul>",l=c.feedsUri.length,n,k,m,g;for(var f=0;f<c.numPost;f++){if(f==p.length){break}n=(c.titleLength!=="auto")?p[f].title.$t.substring(0,c.titleLength)+(c.titleLength<p[f].title.$t.length?"&hellip;":""):p[f].title.$t;m=("summary" in p[f])?p[f].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,""):"";m=(c.summaryLength<m.length)?m.substring(0,c.summaryLength)+"&hellip;":m;g=("media$thumbnail" in p[f])?'<img src="'+p[f].media$thumbnail.url.replace(/\/s72(\-c)?\//,"/s"+c.thumbSize+"-c/")+'" style="width:'+c.thumbSize+"px;height:"+c.thumbSize+'px;">':'<span class="fake-img" style="width:'+c.thumbSize+"px;height:"+c.thumbSize+'px;"></span>';for(var e=0,b=p[f].link.length;e<b;e++){k=(p[f].link[e].rel=="alternate")?p[f].link[e].href:"#"}d+='<li><div class="inner"'+(!c.autoHeight?' style="height:'+c.thumbSize+'px;overflow:hidden;"':"")+">";d+=(c.showThumbnail)?g:"";d+='<div class="title"><a href="'+k+'"'+(c.newTabLink?' target="_blank"':"")+">"+n+"</a></div>";d+='<div class="summary">';d+="<span"+(!c.showSummary?' style="display:none;"':"")+">";d+=(c.showSummary)?m:"";d+="</span></div>";d+='<span style="display:block;clear:both;"></span></div></li>'}d+="</ul>";d+='<div class="more-link"><a href="'+c.feedsUri[c.current].url.replace(/\/$/,"")+"/search/label/"+c.feedsUri[c.current].tag+c.readMore.endParam+'"'+(c.newTabLink?' target="_blank"':"")+">"+c.readMore.text+"</a></div>";a.className=c.listClass;a.innerHTML='<div class="main-title"><h4>'+c.feedsUri[c.current].name+"</h4></div>"+d;h.appendChild(a);c.onLoadFeed(c.current);if((c.current+1)<l){c.loadFeed(c.current+1)}if((c.current+1)==l){c.onLoadComplete()}c.current++}mf_defaults.loadFeed(0);
//]]>
</script>

Le personalizzazioni riguardano diversi parametri oltre a quelle solite dei codici dei colori. La larghezza delle colonne è proposta in 260 pixel ma può essere modificata. Le altre sono:

1. numPost: 4, per settare il numero di post per ogni colonna
2. showThumbnail: true, per mostrare la miniatura; false al posto di true se non la si vuole
3. showSummary: true, per mostrare l'incipit;  false al posto di true se non lo si vuole
4. summaryLength: 80, il numero dei caratteri dell'incipit del post
5. thumbSize: 72, la dimensione delle miniature
6. text: "More", è il link alla fine della colonna per aprire la pagina della etichetta
7. endParam: "?max-results=8" per settare il numero di post da visualizzare nella pagina della etichetta che si apre quando si clicca su More.

COME CONFIGURARE LE ETICHETTE

Per ogni etichetta dobbiamo inserire l'URL del dominio (con il .com se gratuito), il nome da visualizzare e il suo tag che deve essere identico a quello di Blogger con questa sintassi

{
 name: "NOME VISUALIZZATO",
 url: "URL_DEL_BLOG",
 tag: "NOME_ETICHETTA" },

È importante soprattutto il tag della etichetta. Ricordo che si tratta di un valore case sensitive in cui le maiuscole sono diverse dalla minuscole. Vale a dire WhatsApp è una etichetta diversa da Whatsapp che a sua volta è diversa da WHATSAPP. Se siete soliti utilizzare frasi di due o tre parole per una etichetta è opportuno che apriate il browser per verificare quale sia il suo indirizzo. Per esempio lo spazio viene sostituito da %20; quindi se avete come etichetta "social network" in tag dovete mettere social%20network. Si possono aumentare o diminuire le etichette mostrate inserendo altri blocchi di codice con la stessa sintassi oppure eliminare alcuni di quelli presenti. State attenti all'ultima etichetta che ha una sintassi diversa dalle precedenti. Non c'è la virgola e invece c'è la parentesi quadra.  

Demo
Clicca qui

COME SETTARE LA LARGHEZZA DELLA PAGINA STATICA

Se volete allargare la pagina statica per farci entrare più colonne potete aggiungere nell'Editor della pagina prima del codice del widget un altro codice con questa struttura

<style type="text/css"> #sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 { display: none; visibility: hidden; } #main { width: 1000px; /* Larghezza della pagina statica */ } </style>

in cui abbiamo preso come esempio un layout che ha sidebar solo sulla destra. Nel caso in cui ci fossero anche sulla sinistra o fossero solo da quella parte si devono sostituire gli ID colorati di viola con altri ID trovati andando su Bacheca -> Layout. La larghezza della pagina sarà un parametro fondamentale, insieme alla larghezza delle stesse (260 pixel), per poter mostrare 2, 3 o più colonne.