Articoli correlati (Related posts) su Blogger Blogspot

Abbiamo visto altre volte come sia possibile e facile personalizzare il nostro sito in Blogger Blogspot, aggiungendo widget (o gadget) simili a quelli disponibili per Wordpress come la Tag cloud. Quello che presento ora è una modifica al vostro sito Blogger Blogspot che permette di avere un elenco di articoli correlati a quello che viene visualizzato, widget utile, oltre che carino, per fidelizzare i nostri lettori.

A differenza di altri gadget che possono essere inseriti incollando codice da Layout -> Aggiungi un gadget, in questo caso bisogna modificare il codice Html, ma tranquillo, non è difficile, anche in questo caso basta un copia e incolla!
Esistono più gadget per gli articoli correlati. Quello che ti presento in questo articolo è il più classico e semplice e sono convinto che ti piacerà.

Operazioni preliminari
Prima di tutto esegui un backup del tuo modello da Layout -> Modifica Html -> Scarica modello completo. Questo ti consentirà di porre rimedio nel caso tu commettessi degli errori.

Passo 1
Vai a Layout -> Modifica HTML. Poi clicca sulla casella Espandi i modelli widget

Passo 2
Cerca il seguente codice

</head>

e subito prima di tale riga incolla questo codice

<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://7a9ymq.blu.livefilestore.com/y1pZXx089yzvZ2OURU4uckG7fRd0lpY8LdXip1agNUQE7NUYCYTVSj5NuLnIiAtej3JGgWBJimcQjE/commbg.gif&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://www.lucapacini.50g.com/Depo_Blogger/relatedPosts_ForBlogger2.js' type='text/javascript'/><!--RelatedPostsStops-->

Passo 3
A questo punto cerca il seguente codice

<data:post.body/>

e subito dopo incolla questo

<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

Non c'è altro da fare. Salva e il gioco è fatto!

Se vuoi puoi personalizzare il numero di articoli correlati esposti, andando a modificare il numero indicato accanto a max-results, di default impostato a 5.

Buon divertimento!
Via bloggerstop.net