Articoli simili, correlati per etichetta, da inserire alla fine dell'articolo in un blog su Blogger.

Qualche mese fa ebbe un grande successo il widget LinkWithin che inseriva degli articoli simili a quelli dell'articolo corredati da miniature. Questo gadget non è personalizzabile in quanto lo script è nei server della società che lo ha creato. Ultimamente è meno utilizzato perché, visto che la velocità di caricamento è diventata un importante parametro per determinare la SERP di una pagina, gli webmaster tendono a alleggerire i blog gli widget troppo pesanti. Per mostrare alla fine del post altri articoli con argomento simile si tende quindi a scegliere dei gadget che mostrino solo l'elenco dei titoli di altri post che hanno le stesse etichette di quello visualizzato.

Quello che vado a presentare ha la particolarità di essere abbastanza leggero ma anche non disprezzabile dal punto di vista estetico. Si va su Design > Modifica HTML e, dopo aver salvato il template, si cerca la solita riga </head>, subito sopra si incolla questo codice

<!-- Articoli Correlati Inizio -->
<style> #articoli_correlati { float : left; width : 530px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Verdana; margin-bottom:10px; } #articoli_correlati .widget { list-style-type : none; margin : 4px 0 4px 0; padding : 0; } #articoli_correlati .widget h2, #articoli_correlati h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #articoli_correlati a { text-decoration : none; } #articoli_correlati a:hover { text-decoration : none; } #articoli_correlati ul { border : medium none; margin : 10px; padding : 0; } #articoli_correlati ul li { display : block; background : url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtMzRY3TN3ZoIXAM-LdmKUUbimEgAUWHnN_TWj5a1G_LTpd6PdGW29Vgq53q6JGZptjnugIFFVzoj-ZHaXlA_ORNjXqJYfSSdcDsKs2jWSLP6i0RlgrhyKtUGKkLAzOWafu40GwSf4d0Y/&quot;) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/scriptperilblog/javascript-2/articoli-simili.js' type='text/javascript'/>
<!--Articoli Correlati Fine - www.ideepercomputeredinternet.com -->

Le personalizzazioni da fare sono molte ma solo di adattamento al nostro template. Riguardano la larghezza (width), i margini, la dimensione dei caratteri, lo stile dei bordi (border-bottom:1px dotted #cccccc;) che è punteggiato di grigio e la icona che si visualizza sulla sinistra di ogni articolo, che ha l'URL evidenziato di viola e che può essere sostituita da un'altra a nostro piacimento. Ricordo che ha dimensioni 16x16 pixel e che è in formato PNG.

Il codice seguente serve per visualizzare materialmente gli articoli correlati e può essere incollato o subito sotto la riga <data:post.body/> o sotto il blocco di codice del read more che segue detta riga. Forse l'opzione migliore però è quella di incollarlo subito sopra a  <div class='post-footer'>

<!-- Articoli Correlati Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='articoli_correlati'>
<font face='Arial' size='3'><b>Altri articoli con etichetta: </b></font><font color='#003366'><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=articoli_simili&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> articoli_duplicati(); stampa_etichette();
</script>
</div></b:if>
<!-- Articoli Correlati Fine - www.ideepercomputeredinternet.com -->

Le modifiche che possono essere fatte riguardano la dimensione dei caratteri del titolo del widget (3) e il colore delle etichette che sono mostrate dopo il titolo. Il numero 5 indica il numero massimo di articoli presi in esame per ciascuna etichetta. Il gadget avrà un aspetto simile al seguente screenshot e sarà visibile solo nei singoli post.

Se non vogliamo visualizzare le etichette del post da cui si ricavano gli articoli simili, bisogna dare a quest'ultime lo stesso colore dello sfondo del blog. Se si ha un blog bianco, basta sostituire color='#003366; con color='#FFFFFF;. Finalmente si può salvare il modello. Questo gadget non si inserisce tramite un elemento pagina HTML/Javascript e quindi non può essere posizionato con il mouse. Per una Demo del widget basta aprire un post del Blog Di Prova per esempio questo degli Ultimi Post per Tag. Ho inserito il colore bianco per le etichette, come lo sfondo del blog, e quindi non si visualizzano.

Aggiornamento: Quelli di Google (leggi le dichiarazioni di Matt Cutts) non vedono di buon occhio il testo dello stesso colore dello sfondo perché considerato una specie di inganno nei confronti del visitatore. Quindi per non visualizzare le etichette in questo widget è meglio utilizzare un altro metodo che non ha queste controindicazioni. Si sostituisce la stringa <font color='#003366'> con <span style='display:none;'> e il suo tag di chiusura </font> con </span>. Il widget non viene visualizzato con Internet Explorer, neppure con la versione più recente IE9.