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:
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:
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.
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.
<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?"…":""):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)+"…":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" }
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
