Come inserire il widget degli articoli simili con miniature completamente personalizzabile.

Il widget LinkWithin è presente in moltissimi blog sulla piattaforma Wordpress e su Blogger. Dai commenti agli articoli che ho dedicato a questo gadget ho potuto constatare che non funziona correttamente in tutti i modelli. Le difficoltà riscontrate sono state

 1)Impossibilità di cambiare la posizione del widget con il mouse

 2)Impossibilità di resettarlo per modificare il numero delle miniature da visualizzare

 3)In alcuni post non appaiono le miniature ma solo dei link a degli articoli

 4)Le miniature mostrate sono un mix tra articoli correlati da medesime etichette e post casuali

 5)Le possibilità di personalizzazione sono minime

Una validissima alternativa a questo gadget è stata creata da Aneesh di  Blogger Widget alla metà di Agosto e, nel momento in cui scrivo, ha già ricevuto 268 commenti. Questo metodo, contrariamente a LinkWithin, si basa esclusivamente sulle etichette e le miniature visualizzate saranno quelle delle immagini dei post che hanno la medesima categoria.

Per inserirlo andiamo su Layout > Modifica HTML e, come al solito, Salviamo il modello completo. Cerchiamo la riga

</head>

e, immediatamente sopra, inseriamo il seguente codice

<!-- Articoli Simili -->
<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;
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/widget-1/articoli-simili-miniature.js' type='text/javascript'/>
</b:if>
<!-- Articoli simili -->

Le personalizzazioni da fare riguardano il colore del titolo delle miniature (#191919) e quello di sfondo delle stesse quando vengono puntate con il mouse (#FDBCB7). Possiamo anche scaricare il file Javascript il cui URL è evidenziato di rosso e caricarlo su un nostro hosting per averne sempre il controllo in caso di blackout del sito su cui è caricato o superamento della larghezza di banda da parte degli utenti.
Adesso cercate una delle seguenti righe (la prima dovrebbe essere presente in quasi tutti i modelli, altrimenti cercate la seconda)

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

e, immediatamente dopo alla linea che avete trovato, tra le due indicate, inserite quest'altro codice

<!-- Articoli Simili -->
<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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=4; /* Numero di Articoli Simili */
var relatedpoststitle="Ti potrebbero anche interessare:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Articoli Simili -->

Le personalizzazioni in questo caso riguardano

1. Il numero di miniature da mostrare: si può sostituire a 4 un numero più piccolo o più grande in var maxreults
2. Il titolo del widget che ho inserito identico a quello di LinkWithin "Ti potrebbero anche interessare" e può essere ovviamente modificato.

Salvate il modello e guardate il widget in azione. Le miniature che vengono visualizzate provengono esclusivamente dalle immagini postate negli articoli. Nel caso in cui un articolo non abbia nessuna immagine al suo interno sarà mostrata la miniatura "No Image" come mostrato nel seguente screenshot

Per cambiare l'immagine, che si trova a questo indirizzo, con una personalizzata, si può scaricare il file 

https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js

sostituire l'URL dell'immagine con quello di un'altra che abbiamo precedentemente caricato nel web. Successivamente si ricarica il Javascript su un hosting che lo supporta, tipoDropBox o Google Sites, e si inserisce il suo indirizzo nella prima parte del codice al posto del file Javascript che abbiamo modificato.

Concludo sottolineando che questo widget sarà visibile solo alla fine dei singoli articoli mentre non si vedrà in Homepage e nelle pagine di archivio. Coloro che hanno difficoltà con il widget LinkWithin e hanno un blog con immagini in quasi tutti i post, possono passare a questo widget che non presenta nessuna difficoltà di installazione e di personalizzazione.

Aggiornamento: Coloro che avessero difficoltà con questo codice, che è vecchio e non risiede nei miei spazi, possono provare quello nuovo presentato nell'articolo "Il widget degli articoli correlati con miniature". Questo potrebbe avere problemi di superamento di bandwidth che non si dovrebbero ripresentare con il codice più recente.