Creare sezioni con le etichette nelle pagine statiche su Blogger

Uno dei maggiori limiti di Blogger è sempre stata la grafica, a differenza di altre piattaforme non offre delle opzioni per cambiare il formato di una pagina a seconda del contenuto che si deve andare ad inserire. Fino ad ora abbiamo visto come creare un articolo e come creare delle pagine statiche, mentre adesso vedremo uno dei tanti modi per creare delle sezioni con le etichette all'interno di una pagina statica su Blogger.

Eccovi un esempio del risultato che è possibile ottenere:

Come potete vedere ho creato due liste con le etichette dedicate agli articoli di Blogger e di Wordpress. Si vedranno affiancate dentro la pagina statica mentre da smartphone e tablet, a seconda della risoluzione dello schermo potrebbero vedersi incolonnate (rimarranno in ogni caso facilmente leggibili e funzionanti).
Il numero di colonne e di righe varia in base a quante etichette andrete ad installare, non c'è un limite ben definito, e alla larghezza del blog. Sicuramente più alto sarà il numero di etichette aggiunte e maggiore sarà la lentezza dello script, specialmente se si stanno utilizzando altri widget con javascript (es. articoli simili o correlati, articoli recenti, articoli casuali ecc.); comunque fino a 6 etichette per pagina non dovrebbe esserci alcun problema di pesantezza dello script.

Per installare questo script con le etichette dovrete andare su Pagine > Nuova pagina. Dopodiché dovrete selezionare la modalità HTML (senza mai ritornare nella modalità Scrivi, anche dopo che la pagina è stata pubblicata) ed incollare il seguente codice:

<style type="text/css" scoped="scoped">
#feed-list-container{margin-top:-20px;}
.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}
.post-body ul {padding: 0em !important}
.list-entries {
margin:5px;
width:285px;
float:left;
font-size:11px;
}</style>
<div id="feed-list-container">
<script type="text/javascript">
var multiFeed = {
feedsUri: [{
name: "NOME ETICHETTA 1",
url: "http://www.scuolissima.com",
tag: "CODICE-URL-ETICHETTA-1" }, {
name: "NOME ETICHETTA 2",
url: "http://www.scuolissima.com",
tag: "CODICE-URL-ETICHETTA-2" }, {
name: "NOME-ETICHETTA3",
url: "http://www.scuolissima.com",
tag: "CODICE-URL-ETICHETTA-3" } ],
numPost: 4,
showThumbnail: true,
showSummary: false,
summaryLength: 80,
titleLength: "auto",
thumbSize: 72,
containerId: "feed-list-container",
readMore: {
text: "Continua a leggere...",
endParam: "?max-results=8" }};
</script>
<script type="text/javascript">
var mf_defaults={feedsUri:[{name:"Posting JQuery",url:"http://www.amorsevillista.com",tag:"JQuery"},{name:"Posting CSS",url:"http://www.amorsevillista.com",tag:"CSS"},{name:"Widget-Widget Blogger",url:"http://www.amorsevillista.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></div>

Personalizzazioni

margin-top:-20px; --> imposta la distanza fra queste sezioni e il titolo dell'articolo.

width:285px; --> imposta la larghezza di ogni singola sezione. Ciascun blog ha dimensioni diverse e bisognerebbe adattarla a seconda delle proprie esigenze.

NOME-ETICHETTA-1 --> va rimpiazzato con il nome della sezione.

www.scuolissima.com --> va rimpiazzato con l'url della homepage del vostro blog (utilizzate il .com e non il .it che potrebbe non funzionare).

CODICE-URL-ETICHETTA-1 --> bisogna prendere l'url di un etichetta e poi utilizzare solo il nome dell'etichetta come appare nell'url (compreso simboli insoliti come numeri e percentuale).

Eccovi un esempio di url di un etichetta:

http://www.scuolissima.com/search/label/mappe%20concettuali

numPost: 4, --> mostra gli ultimi 4 articoli presenti in quell'etichetta.

showThumbnail: true, --> attualmente mostra le immagini, se volete disattivarle dovete rimpiazzare true con false.

showSummary: false, --> sostituendo false con true si può attivare la descrizione per ogni articolo.

summaryLength: 80, --> determina la lunghezza della descrizione dell'articolo se attivata.

thumbSize: 72, --> determina la dimensione dell'immagine dell'articolo.

endParam: "?max-results=8" --> dopo aver cliccato su continua a leggere appariranno gli ultimi 8 articoli presenti in quell'etichetta, il numero lo potete decidere voi.

Aggiunta o rimozione di sezioni

Per rimuovere una sezione dovrete togliere questa parte di codice:

, {
name: "NOME-ETICHETTA3",
url: "http://www.scuolissima.com",
tag: "CODICE-URL-ETICHETTA-3" }

mentre per aggiungere una sezione dovrete utilizzare lo stesso codice, modificando il nome e il codice url dell'etichetta che si vuole visualizzare. Va aggiunto prima della parentesi quadra chiusa di colore blu e di grandi dimensioni.


Non credo che una pagina statica di questo tipo si possa indicizzare bene sui motori di ricerca in quanto è pur sempre un testo ricavato da uno script automatico, però tramite essa è possibile dare una "forma" al blog e gli utenti gradiranno di certo perché troveranno facilmente ciò che cercano dentro la stessa pagina.

Fonte: AmorSevillista