Widget dei titoli e delle miniature degli articoli simili o correlati alla fine del post in Blogger.

Widget degli Articoli o Post Simili o Correlati per blog su piattaforma Blogger da visualizzare alla fine di ciascun articolo.

La frequenza di rimbalzo o bounce rate è la percentuale dei lettori che abbandonano un sito web nel giro di 30 secondi dopo averne scorso solo i primi contenuti. In realtà su Google Analytics possiamo avere dei dati ancora più dettagliati e vedere quanti sono coloro che ci lasciano dopo 5, 10 o 20 secondi. Avere una frequenza di rimbalzo bassa per un sito significa essere maggiormente considerato dai motori di ricerca che lo premieranno con un migliore posizionamento.

Sono molti i fattori che incidono in tal senso a cominciare dall'incipit del post, dalla velocità di caricamento del sito e ovviamente dalla bontà dei contenuti pubblicati. Un aiuto importante lo possono dare i widget che mostrano gli Ultimi Post del blog, gli Articoli più Popolari e quello degli Articoli Simili. In riferimento a quest'ultimo gadget ne ho già illustrate diverse versioni e adesso vado a presentarne un'altra per tutti i blog di Blogger anche con dominio personalizzato visto che non ci sono javascript esterni. Alla fine del post si visualizzeranno i titoli e le miniature di altri articoli che abbiano almeno una etichetta in comune con il post che è stato aperto

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sull'area del codice con il sinistro del mouse. Successivamente si digita Ctrl+F per visualizzare il campo di ricerca in cui si incolla la riga </head> . Si pigia su Invio e sul modello verrà evidenziata tale riga. Subito sopra si incolla il codice

<!-- Articoli Simili Inizio -->
<style>
#articoli_simili {
float: left;
width: 560px;
height: 230px;
}
#articoli_simili h2 {
margin-top: 20px;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #036;
font-weight:bold;
font-size: 20px;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizkfUMT10yACmtYTQt6-VnVu74uvpQw5iqBfo_WQdEuufOjTUNVIAG6xVLuSon3Ekvjrn0Sp_W8xeOw3FQDFuMlxJLQ1uiHFfygq5nw1u_4AP_KfM1M-dZ6owWMqg1VAFv7ZeJt2Ef3i4/s130/default-image.png&quot;;
var maxresults=4;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Articoli Simili:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var rel_titoli = new Array();
var titoli_num = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
rel_titoli[titoli_num] = entry.title.$t;
try
{thumburl[titoli_num]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[titoli_num]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[titoli_num]=defaultnoimage; else thumburl[titoli_num]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizkfUMT10yACmtYTQt6-VnVu74uvpQw5iqBfo_WQdEuufOjTUNVIAG6xVLuSon3Ekvjrn0Sp_W8xeOw3FQDFuMlxJLQ1uiHFfygq5nw1u_4AP_KfM1M-dZ6owWMqg1VAFv7ZeJt2Ef3i4/s130/default-image.png";}
}
if(rel_titoli[titoli_num].length>35) rel_titoli[titoli_num]=rel_titoli[titoli_num].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[titoli_num] = entry.link[k].href;
titoli_num++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = rel_titoli[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
rel_titoli = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#FFFFFF";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!rel_titoli[i]))
{
relatedUrls.splice(i,1);
rel_titoli.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((rel_titoli.length - 1) * Math.random());
var i = 0;
if(rel_titoli.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < rel_titoli.length && i < 20 && i<maxresults) {
  document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:120px;height:90px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: bold; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align:center;">'+rel_titoli[r]+'</div></a>');
i++;
if (r < rel_titoli.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
rel_titoli.splice(0,rel_titoli.length);
}
//]]>
</script>
</b:if>
<!-- Articoli Simili Fine -->

Si clicca su Vai al widget > Blog1 e si cerca la sezione
<b:includable id='post' var='post'>
Si scorre il codice oppure, mediante Ctrl+F, si cerca la riga
<data:post.body/>

Subito sotto a questa si incolla questo secondo codice

<!-- Articoli Correlati Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='articoli_simili'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div></b:if>
<!-- Articoli Correlati Fine -->

Finalmente si può salvare il modello. Ricordo che nella Anteprima non si visualizzerà alcuna modifica perché le miniature degli articoli simili saranno visibili solo quando si apra un post.

PERSONALIZZAZIONI PIÙ RILEVANTI

1. Modificando var maxresults=4; si può mostrare un numero di miniature diverso da 4
2. width: 560px; e height: 230px; sono le dimensioni totali del gadget
3. Si può modificare il codice del colore del titolo del widget - color: #036;
4. La dimensione dei caratteri del titolo del widget è font-size: 20px;
5. Si possono personalizzare il titolo del gadget "Articoli Simili" e il colore tra le miniature #fff
6. L'URL della immagine di default colorato di viola quando nel post non ci fossero immagini
7. Le dimensioni delle miniature sono width:120px; height:90px
8. Il titolo del post simile ha parametri font-weight: bold; font-size: 14px; cioè ha un carattere di 14 pixel ed è in grassetto. Per togliere il grassetto si può mettere normal al posto di bold
9. Il tag text-align:center serve centrare il titolo sotto la miniatura. 

Cliccando su una miniatura o su un titolo verrà aperto il post relativo.