Widget articoli simili sotto i post su Blogger

Se si vuole scrivere un buon articolo per il blog non ci si deve dimenticare di inserire al suo interno dei link inerenti a quanto scritto. I link non devono essere aggiunti incollando semplicemente l'url bensì inserendoli dentro il testo che è il modo più elegante per consigliare un altro argomento. I motori di ricerca di solito vedono di buon occhio i link interni ma non bisogna abusarne o linkare sempre gli stessi. Oltre ai link da aggiungere manualmente dentro gli articoli potete utilizzare anche il widget degli articoli simili sotto ai post che aiuta moltissimo ad aumentare le visualizzazioni di pagina e in generale può solo portare benefici a tutto il blog.


Questo è un esempio di come apparirà il widget una volta installato:

Per installare il widget degli articoli simili sotto tutti i post di Blogger dovete cercare il tag di chiusura </head> e prima di esso dovete aggiungere il seguente codice:

<!--Articoli simili CSS -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:4px;
padding-left:2px;
}
#related-posts .widget{
padding-left:4px;
margin-bottom:8px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Trebuchet MS, Georgia, Times New Roman, Times;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
color:#003366;
}
#related-posts a{
color:#003366;
}
#related-posts a:hover{
color:#0A82B0;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:13px;
text-color:#0A82B0;
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioLO-QlMiDxHGeC8ofPLYH6kTslKl0Brrs1ECa0xHf_ju8gzGioqyEsLnyGgs82dUjqvh_cO5ixpcTtCryisKzIPaiHIg9JJvlnzyVr5ErMI6u-iBj-jEPKlajAnWl-t3A_sJ1x-oMiQo/s1600/freccetta.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 10px;
padding-left: 20px;
padding-top:0px;
border-bottom:1px dotted #0A82B0;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Articoli Consigliati:&quot;;
</script>
<script async='' type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;

}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels(currenturl) {
for(var i = 0; i < relatedUrls.length; i++)
{
if(relatedUrls[i]==currenturl)
{
relatedUrls.splice(i,1)
relatedTitles.splice(i,1)

}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

if(relatedTitles.length>1) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<ul>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
relatedUrls.splice(0,relatedUrls.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]></script>
</b:if>
<!--Articoli Simili CSS Fine-->

Dopodiché, prima della riga <div class='post-footer'> oppure dopo la riga <data:post.body/> oppure ancora dopo i pulsanti di condivisione dovete incollare il seguente codice:

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

Andando a modificare il parametro var maxresults=6; di quest'ultimo codice è possibile variare il numero di articoli consigliati, attualmente impostato a 6 articoli simili.

Personalizzazioni

Lo sfondo che nell'immagine di esempio è grigio dipende dal fatto che il codice l'ho inserito nello stesso spazio dei pulsanti di condivisione, ma normalmente è trasparente.

color:#003366; --> questo è il colore dei link.

color:#0A82B0; --> questo è il colore dei link passandoci sopra con il mouse.
font-size:13px; --> è la dimensioni dei caratteri dei titoli degli articoli simili.
1px dotted #0A82B0; --> è la dimensione e il colore del bordo sotto ogni titoli degli articoli simili.


Come potete notare, nel primo codice è presente l'indirizzo link delle frecce blu ►, potete sostituirle con altre immagini rimpiazzando l'url.

LEGGI ANCHE: Widget articoli simili con l'utilizzo delle miniature