Widget degli Articoli Simili con Miniature per domini personalizzati.

Il gadget degli Articoli Simili o Correlati con Miniature per Blogger senza l'utilizzo di javascript esterni in modo da essere inserito anche in domini personalizzati.

Ho recentemente presentato una nuova versione il gadget degli Articoli Correlati con Miniature per siti sulla piattaforma Blogger. Tale widget ha un javascript esterno nella fattispecie caricato su Google Sites. Se si possiede un nostro dominio acquistato da Blogger, il gadget non funzionerà perché i file caricati su Google Sites sono attivi solo nei domini di Google. I siti del tipo nomeblog.blogspot.com sono infatti nei server dei Google mentre quelli www.mioblog.com non lo sono anche se su Blogger.

In questi casi bisogna caricare i file esterni, che possono essere javascript, CSS o XML, nella cartella Public di Dropbox, su Google Code oppure su un sito di nostra proprietà. Due giorni fa mi è stato riferito da Camilla che è stato pubblicato un post su Google Plus che sembra possa permettere di usare Google Drive come hosting di file. Al momento nel mio account questa possibilità ancora non esiste neppure se configuro nelle impostazioni la lingua inglese. Vi riferirò se questa nuova funzione dovesse realmente concretizzarsi. Quindi se si ha un blog in un dominio personalizzato rimane solo la possibilità di caricare il file javascript da qualche altra parte.

In realtà non è così perché è possibile caricare i file .js direttamente nel modello di Blogger incollando il contenuto del file in mezzo a quattro righe. Ho usato tale escamotage per questo widget visto che DropBox impone delle limitazioni di banda molto stringenti e se si passano smettono di funzionare per due giorni tutti i file che vi sono stati caricati. Riporto i passaggi che ho effettuato a beneficio di coloro che volessero installare questo gadget anche in un dominio di loro proprietà. Dopo aver salvato il template si va come al solito su Modello > Modifica HTML > Procedi e si espandono i modelli widget. Si cerca la riga </head> e, subito sopra, si incolla questo codice

<!--Articoli Simili con Miniature Inizio-->
<style type='text/css'>
#articoli-simili {float:center;text-transform:none;height:175px; background-color: #FFFFFF; box-shadow: 0 0 0 1px white inset; -moz-box-shadow: 0 0 0 1px #fff inset; -webkit-box-shadow: 0 0 0 1px white inset; padding:5px;}
#articoli-simili h2{padding: 8px 8px; color:#d84938; font-family:Trebuchet; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 22px; letter-spacing: 1px; background: #ffffff; width:auto;}
#articoli-simili a{color:#d84938; font-weight: bold; }
#articoli-simili a:hover {background-color: rgba(0,0,0,0.8); color:#ffffff; font-weight: bold; text-decoration: initial;}
</style>
<script type='text/javascript'>
//<![CDATA[
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZn6KM7QyL21_P2U9Kqjj84Pa2XT9V4SZDmMkldHNfWHxk9mj2mOKuuAaP2ukUt60_lIdxEIewKo_Wj7ZWfKsl8fYfH3YjNnXYJQubO98AcjedWrfff_spuOfx5LOdWAe65q3BGKOP96n/s140/default-image.png";
var maxresults=7;
var splittercolor="#ffffff";
var relatedpoststitle="Leggi altri articoli su argomenti simili";
var relatedTitles=new Array();
var relatedTitlesNum=0;var relatedUrls=new Array();
var thumburl=new Array();
function art_corr_min(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZn6KM7QyL21_P2U9Kqjj84Pa2XT9V4SZDmMkldHNfWHxk9mj2mOKuuAaP2ukUt60_lIdxEIewKo_Wj7ZWfKsl8fYfH3YjNnXYJQubO98AcjedWrfff_spuOfx5LOdWAe65q3BGKOP96n/s140/default-image.png"}}}if(relatedTitles[relatedTitlesNum].length>35){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"..."}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}}return false}function printRelatedLabels_thumbs(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#ffffff"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!relatedTitles[i])){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;padding:5px;float:left;');if(i!=0)document.write('border-left:solid 0.5px '+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img style="width:80px;height:80px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="width:80px;padding-left:3px;height:86px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: bold; font-size: 14px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<!--Articoli Simili con Miniature Fine-->

Si cerca quindi la riga

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

e si scorre il codice fino a trovare questi tag

</div></div>
</b:includable>

Tra queste due righe si posiziona il cursore come illustrato nel seguente screenshot

e si incolla questo secondo codice

<!-- Articoli Correlati con Miniature Inizio -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='articoli-simili'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=art_corr_min&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Articoli Correlati con Miniature Fine -->

Si salva il modello. Questo nuovo modo di installare il widget degli Articoli Simili con Miniature permette un numero superiore di personalizzazioni tra cui anche quella di configurare la dimensione delle miniature e lo stile del titolo del post visualizzato subito sotto.

Faccio un breve elenco dei parametri da personalizzare:

1. Lo sfondo della scritta del titolo del widget in background: #ffffff;
2. Il colore della scritta del titolo in color:#d84938;
3. La famiglia di caratteri della scritta su font-family:Trebuchet;
4. La dimensione del carattere font-size: 22px;
5. La distanza tra le varie lettere su letter-spacing: 1px;
6. La configurazione del grassetto con il tag font-weight: bold;
7. Il colore del titolo e il grassetto su color:#d84938; font-weight: bold;
8. Lo sfondo e il colore del titolo al passaggio del mouse su
   background-color: rgba(0,0,0,0.8); color:#ffffff; font-weight: bold;
   I principianti possono consultare il post sui codici dei colori 
9. L'immagine di default quando non siano presenti nel post su defaultnoimage. L'URL va inserito in due posizioni del codice
10. Il colore di sfondo tra le varie miniature in var splittercolor="#ffffff"; da personalizzare in due occorrenze. Va detto che questo sfondo è visibile solo con Internet Explorer.
11. Il numero delle miniature va visualizzare var maxresults=7;. Il numero è da configurare anche nel secondo codice
12. Il titolo del widget in var relatedpoststitle="Leggi altri articoli su argomenti simili";
13. La dimensione delle miniature in img style="width:80px;height:80px
14. L'altezza dello spazio del titolo del post in height:86px;
15. Il grassetto del titolo del post font-weight: bold;
16. La dimensione dei caratteri del titolo dei post in font-size: 14px; mentre la lunghezza del titolo è proposta a 35 caratteri che possono essere aumentati nelle due occorrenze
17. Ricordo che chi volesse usare il corsivo per titolo del widget o titolo dei post sotto le miniature può inserire nel relativo CSS la riga font-style: italic; da sola o al posto di font-style: normal;

Aggiornamento: Si può installare questo widget anche nella versione mobile di Blogger.