Widget degli Articoli Simili o Correlati per Blogger funzionante con tutti i browser.

Widget degli articoli simili per Blogger completamente personalizzabile e visualizzabile in un elenco con icone.

Il problema maggiore non è tanto quello di creare dei widget quanto quello di fare in modo che il gadget risulti visibile nello stesso modo con tutti i browser. Soprattutto con Internet Explorer ci sono spesso delle difficoltà insormontabili che speriamo diminuiscano con la nuova versione IE9, ma ci credo poco. Sono un paio di giorni che mi sono incaponito con il widget degli Articoli Simili o Related Posts, se vogliamo usare una espressione anglosassone.
Dopo un primo tentativo, con il widget risultato non visibile con IE e dopo una seconda versione, che aveva problemi anche con Firefox, ecco che finalmente ho trovato la quadra, come direbbe un conosciutissimo politico lombardo. La visualizzazione del gadget non è perfettamente identica con tutti e tre i principali browser. Con Internet Explorer vengono mostrati più articoli correlati che con Chrome e Firefox; comunque funziona anche con IE, ad abundantiam. Non chiedetemi per quale ragione con IE si vedono più post perché non la so. Ecco come sarà l'aspetto del widget dopo l'installazione.

Potrà essere posizionato subito sotto il testo dell'articolo per invogliare il navigatore a leggere altri post con argomento simile. Si procede come al solito andando su Design > Modifica HTML e salvando il modello completo per un eventuale backup di ripristino. Si mette la flag a espandi modelli widget e si cerca la riga </head>. Subito sopra si incolla il 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:11px;
text-color:#0A82B0;
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghm7y9Xt5bBo-bYRpkxPvxoZyMiIXYc9UMAyqbCM8BqcKxmTvvPphVc41f0cRXFUamL6yQTaFju22v5hHXA2hkxDrS3XfiEez1vQdfx8Rhq8U3oighM7_riOEwZtnc9rvXL1uviLPnGQU/) 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 Simili:&quot;;
</script>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/widget-articoli-simili.js' type='text/javascript'/>
</b:if>
<!--Articoli Simili CSS Fine-->

Adesso si cerca la riga <div class='post-footer'> oppure l'altra <data:post.body/>. Il codice può essere incollato sopra alla prima riga o sotto la seconda. In questa zona ci possono essere anche i bottoni del Mi Piace di Facebook, il pulsante di Twitter o dei banner pubblicitari. Dobbiamo quindi regolarci caso per caso per scegliere dove visualizzare l'elenco dei post con almeno una etichetta uguale a quello che si è aperto. Ecco il codice da incollare

<!-- 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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>
<!--Articoli Simili Codice Fine-->

Le personalizzazioni che si possono fare riguardano il colore del link (color:#003366;), il colore del link puntato dal mouse (color:#0A82B0;), le dimensioni dei caratteri (font-size:11px;), l'URL della icona a forma di freccia (16x16 pixel), i vari margini, lo stile del bordo sotto ogni link (linea punteggiata border-bottom:1px dotted #0A82B0;) e il titolo del widget (Articoli Simili:). Nel secondo codice possiamo scegliere il numero massimo di post per ciascuna etichetta (5). Si salva il modello. Il gadget sarà ovviamente visibile solo nei singoli post e non in homepage e nelle pagine statiche.

Se volete vedere questo widget in azione, aprite un qualsiasi post del mio blog scientifico La Nuova Atlantide che non aggiorno più da quasi quattro anni.

Aggiornamento: Alla fine dell'elenco degli articoli simili si visualizzerà un link "Get Widget" che porta a  questo post e che serve per inviare i lettori che lo desiderino installare direttamente nella pagina di istruzioni. Mi rendo conto che a qualcuno possa non piacere. Coloro che vogliano nascondere tale collegamento, devono andare su Modello > Modifica HTML > Procedi e cercare la riga
 ]]></b:skin>
Subito sopra va incollato questo semplice codice
#ascredit {display:none;}
quindi si salva il modello.

Fonte principale | Blogger Plugins -