Il widget degli articoli correlati con miniature per un blog su Blogger.

Ho già illustrato questo gadget nel post "Articoli simili con miniature", presentandolo come un'alternativa per la piattaforma Blogger al widget LinkWithin. Tale widget infatti non può essere particolarmente personalizzato e mostra delle miniature di articoli che sono un mix tra post con la stessa etichetta e articoli casuali. Ha inoltre problemi di inserimento e, soprattutto, di disinstallazione in molti modelli. Nel gadget che mi appresto a illustrare le miniature sono ricavate dalle immagini presenti nei post correlati. Quando non ci sono immagini ne viene vista una di default

che volendo può essere cambiata. Andate su Layout > Modifica HTML e scaricate il modello completo. Espandete i modelli widget, cercate la riga

</head>

e, immediatamente sopra, incollate il seguente codice

<!-- Articoli Simili Con Miniature-->
<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: #191919; /* Colore del Titolo */
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;Trebuchet MS&#8221;
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:#FDBCB7;
}
</style>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/miniaturepost2.js' type='text/javascript'/>
</b:if>
<!-- Articoli simili con Miniature-->

Le personalizzazioni riguardano il colore del titolo delle miniature e il colore dello sfondo quando vengono puntate con il mouse. Se volete cambiare l'immagine che appare quando nel post non ce ne sono dovete semplicemente scaricare questo file javascript e sostituire l'URL dell'immagine a inizio post con quello di un'altra immagine che avete precedentemente caricato sul web mediante Skydrive o servizio analogo.
Adesso cercate questa riga

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

nel caso in cui no0n fosse presente cercate quest'altra <p class='post-footer-line post-footer-line-1'> e, immediatamente dopo, incollate il codice

<!-- Articoli Simili con Miniature -->
<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><a href='http://www.ideepercomputeredinternet.com/2010/01/il-widget-degli-articoli-correlati-con.html' style='display:none;'>Widget degli articoli correlati con miniature per Blogger</a><a href='http://www.ideepercomputeredinternet.com/' style='display:none;'>Idee per Computer ed Internet</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6; /* Numero di Articoli Simili */
var relatedpoststitle=&quot;Ti potrebbero anche interessare:&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Articoli Simili con Miniature -->

Le personalizzazioni riguardano il massimo numero di risultati per ciascuna etichetta (il primo 6 che lascerei comunque invariato) e il numero di articoli simili da visualizzare tramite miniatura (il secondo 6 che dipende dalla larghezza del template).
La scelta interessante riguarda anche la frase che si vuole vedere sopra le miniature degli articoli correlati. Ho messo "Ti potrebbero anche interessare" che è identica a quella del widget LinkWithin. Salvate il modello.


Come vedete è molto simile al widget LinkWithin e può esserne un'interessante alternativa.