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/AVvXsEioC81Uctsa6WJJDcnU3OelBYNjwPFQjnn7cozO1_Lh3hbPj1PHXWMfy7nmTetpGYSlftKiQp9BXNvW9dKB-Fx1Y4E2FVWbQ0DDr-ffwzNMqCy-gPli-dr6r8G7Tuf8xBI7W70DcblJqcea/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/AVvXsEioC81Uctsa6WJJDcnU3OelBYNjwPFQjnn7cozO1_Lh3hbPj1PHXWMfy7nmTetpGYSlftKiQp9BXNvW9dKB-Fx1Y4E2FVWbQ0DDr-ffwzNMqCy-gPli-dr6r8G7Tuf8xBI7W70DcblJqcea/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>
</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 == "item"'>
<div id='articoli-simili'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=art_corr_min&max-results=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>");</script>
</div>
<div style='clear:both'/>
</b:if>
<!-- Articoli Correlati con Miniature Fine -->
<b:if cond='data:blog.pageType == "item"'>
<div id='articoli-simili'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=art_corr_min&max-results=7"' type='text/javascript'/></b:loop>
<script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>");</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 Miniaturepermette 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.
Questo nuovo modo di installare il widget degli Articoli Simili con Miniaturepermette 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:
- Lo sfondo della scritta del titolo del widget in background: #ffffff;
- Il colore della scritta del titolo in color:#d84938;
- La famiglia di caratteri della scritta su font-family:Trebuchet;
- La dimensione del carattere font-size: 22px;
- La distanza tra le varie lettere su letter-spacing: 1px;
- La configurazione del grassetto con il tag font-weight: bold;
- Il colore del titolo e il grassetto su color:#d84938; font-weight: bold;
- 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 - L'immagine di default quando non siano presenti nel post su defaultnoimage. L'URL va inserito in due posizioni del codice
- 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.
- Il numero delle miniature va visualizzare var maxresults=7;. Il numero è da configurare anche nel secondo codice
- Il titolo del widget in var relatedpoststitle="Leggi altri articoli su argomenti simili";
- La dimensione delle miniature in img style="width:80px;height:80px
- L'altezza dello spazio del titolo del post in height:86px;
- Il grassetto del titolo del post font-weight: bold;
- 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
- 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 difont-style: normal;
