Articoli correlati per categorie con anteprima su Blogger

Ecco un metodo alternativo per la visualizzazione dei post correlati su Blogger che produrrà un elenco con anteprima molto simile a LinkWithin ma senza appoggiarsi a servizi esterni e badandosi sulle categorie dell’articolo, come la visualizzazione con solo testo e link proposta diverso tempo fa.

L’effetto finale fa davvero la sua figura:

Installarlo su Blogger non è una operazione complicata ma, a scanso di qualsiasi problema, vi invito a fare il backup del template.

Modifiche al template

Da Layout->Modifica HTML, selezionate “Espandi i modelli widget” e cercate questa porzione di codice:

</head>

Subito prima, incollate questo:

<!--Articoli correlati con anteprima script e stile inizio-->
<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:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/creareblog/script-blog/articolicorrelati2.js?attredirects=0&amp;d=1' type='text/javascript'/>
</b:if>
<!--Articoli correlati con anteprima script e stile fine-->

A questo punto cercate questa riga di codice:

<div class='post-footer-line post-footer-line-1'>

Se non la trovate, provate a cercare questa:

<p class='post-footer-line post-footer-line-1'>

Se non riuscite neanche con questa, cercate post-footer-line-1 e tenete in considerazione l’elemento HTML che lo contiene (che inizia con < e finisce con >).

Subito dopo la riga che avete trovato, incollate questo:

<!-- Articoli correlati con anteprima 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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4;
var relatedpoststitle="Articoli correlati";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Articoli correlati con anteprima inizio -->

A questo punto potete salvare il template. Per vedere il widget in azione, dovrete entrare nella pagina del singolo post.

Personalizzare la visualizzazione

Potrete intervenire nell’ultima porzione di codice per modificare i due valori che ho indicato in rosso:

1. maxresults: indica il numero di post da visualizzare, io ho messo 4

2. relatedpoststitle: etichetta visualizza, io ho messo “Articoli correlati”

Chi ha pratica con il codice CSS potrà intervenire nella prima porzione di codice per personalizzare i colori e lo stile del widget.

Differenze rispetto a LinkWinthin

Mentre LinkWithin calcola automaticamente quale dei nostri articoli è legato al post visualizzato in quel momento, spesso con clamorosi errori (ma dipende dai casi), questo gadget è per certi aspetti più preciso, visto che si basa sulle categorie. Direi che entrambi i metodi possono essere preferibili, se avete dubbi potete fare delle prove. LinkWithin ha una velocità di caricamento leggermente migliore dello script, ma niente di eclatante.

Ultime parole

Il gadget che ho presentato in questo articolo è stato creato dall’autore di Blogger Widgets. Il risultato è così impressionante che mi ha fatto pensare ancora una volta come le cose più sorprendenti di Blogger arrivino da programmatori che investono il loro tempo libero gratuitamente, mentre Google centellina le novità.

Condividi su Facebook, Twitter o Google Buzz:

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:

oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!