Articoli correlati (Related posts) su Blogger Blogspot



geek4work

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

mode1.JPG

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(“http://7a9ymq.blu.livefilestore.com/y1pZXx089yzvZ2OURU4uckG7fRd0lpY8LdXip1agNUQE7NUYCYTVSj5NuLnIiAtej3JGgWBJimcQjE/commbg.gif”) 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 == “item”‘>

<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 != “true”‘>,</b:if><b:if cond=’data:blog.pageType == “item”‘>

<script expr:src='”/feeds/posts/default/-/” + data:label.name + “?alt=json-in-script&callback=related_results_labels&max-results=5″‘ 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!

Traduzione e rielaborazione da bloggerstop.net

Annunci sponsorizzati:
Condividi su Facebook Condividi su Twitter!
Pinterest