Widget che mostra tutti i post di Blogger in una sidebar.

Gadget per blog su Blogger che permette di mostrare ai visitatori tutti gli articoli che sono stati pubblicati e che possono essere navigati andando su Post successivi.

Quello che vado a presentare è un widget per Blogger che ritengo sia molto interessante perché permette ai visitatori di scorrere tutti gli articoli che sono stati pubblicati senza lasciare la pagina. Può sostituire in un colpo solo il classico gadget degli Ultimi Articoli, quello  della Mappa del sito con Miniature e quello degli Ultimi 1000 post pubblicati, tutto questo con una velocità di caricamento della pagina che non sembra particolarmente penalizzata.

Il lettore può cliccare su Post successivi e Post Precedenti per scorrere tutti i nostri contenuti e possiamo configurare anche quanti articoli debbano essere visibili per ogni schermata. Ciascun elemento è formato dal titolo del post, dalla miniatura della prima immagine presente e dallo snippet dell'articolo. Inoltre sono possibili personalizzazioni estetiche per quello che riguarda i colori e altri parametri.

L'installazione è piuttosto semplice e il widget dovrebbe funzionare nella maggior parte dei modelli. Dopo aver salvato il template si va su Modello > Modifica HTML e, dopo aver cliccato sull'area del codice, si digita Ctrl+F e si cerca la riga </head>. Subito sopra a questa si incolla questo codice

<!-- Widget di tutti i post per Blogger - Inizio -->
<style>
#contenitore{border:1px solid #666;width:100%;margin:0 auto}
#el_box{margin:0px}
.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.elementi h6,.elementi h6 a{font-size:14px!important;margin:0;color:#111}
.elementi:hover{background-color:#afe5f3;}
.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}
#caricamento{color:#888;font-family:Georgia;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#262626 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKFUKHXvDe-SMDcnC5HOwloE1n8hPGSz645UfL_gEokdlNyNXJbHKRrBSRxetWugwUOlR7Chjto-43tBT3O65VITXBixB0bn40m2mXUlrFCiPrHannRT5LVnb1NS9FoODgJ_mxJoqzAY/s300-no/ajax_loader.gif) no-repeat 50% 50%;height:470px;border:1px solid #afe5f3;}
#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}
#navigazione:hover{background-color:#d4d4d4;}
#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigazione span{padding:5px 10px}
#navigazione .next{float:right}
#navigazione .previous{float:left}
#navigazione .home{text-align:center}
#navigazione a:hover,#navigazione span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://demo-parsifal32.blogspot.com";
var characnumber = 90;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function mostrapost(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVHZ5rV0LqGJo0FpwIubmiO6Ig8jVFMIyKMrcZGenGxB9q-LNd1lMRBgnFZvrCSkhtSAmClplDVrOfNz-rMu3bZTiKGkrKRTb4P8twgle3NXmmSj-uG_uaKigT0sQZFWDxlpWk-SvnpDw/s300-no/no-immagini.jpg";
}
showblogfeed += "<div class='elementi'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,characnumber) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("el_box").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:feed_nav(-1);' class='previous'> Post precedenti</a>";
} else {
showblogfeed += "<span class='noactived previous'> Post precedenti</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:feed_nav(1);' class='next'>Post successivi </a>";
} else {
showblogfeed += "<span class='noactived next'>Post successivi </span>";
}
showblogfeed += "<a href='javascript:feed_nav(0);' class='home'>Inizio</a>";
document.getElementById("navigazione").innerHTML = showblogfeed;
}
function feed_nav(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=mostrapost";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("el_box").innerHTML = "<div id='caricamento'></div>";
document.getElementById("navigazione").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var el_box = document.createElement('script');
el_box.setAttribute('type', 'text/javascript');
el_box.setAttribute('src', archievefeed);
el_box.setAttribute('id', 'Ip_etichette');
document.getElementsByTagName('head')[0].appendChild(el_box);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("Ip_etichette");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { feed_nav(0); }
//]]>
</script>
<!-- Widget di tutti i post per Blogger - Fine -->

Si salva il modello. Si va su Layout >  Aggiungi un gadget > HTML/Javascript, in Sezioni del sito si incolla il codice qui di seguito e si clicca su Salva.

<div id="el_box"></div>
<div id="navigazione"></div>

Per verificare il funzionamento di questo bel widget accedete alla pagina della Demo

I parametri delle personalizzazioni più importanti sono stati colorati. In questo breve elenco riporto quelli più significativi per adattare l'aspetto del widget a quello del blog su cui viene installato

1. Post precedenti, Post successivi e Inizio possono essere sostituiti da altre espressioni
2. I codici dei colori possono essere adattati al nostro layout. Ricordo che #afe5f3 è il colore di un singolo elemento quando viene puntato dal mouse
3. La famiglia di font Georgia può essere cambiata in una o in tutte le sue occorrenze
4. Ci sono due URL di immagini che riguardano la GIF di caricamento e l'indirizzo della immagine di default che viene mostrata quando non ve ne siano nel post.
5. La miniatura ha dimensioni  height:70px e width:70px che possono essere cambiate
6. var numfeed = 5; determina il numero di post da mostrare
7. var urlblog = "http://demo-parsifal32.blogspot.com" è l'URL del blog e rappresenta il parametro più importante. Ricordarsi di usare il .com invece del localizzato .it
8. var characnumber = 90; configura il numero dei caratteri da mostrare nello snippet.