Pubblicato il 07/02/13e aggiornato il

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://lh5.googleusercontent.com/-OUDrOT1ESZc/UQAFcgXyxTI/AAAAAAAAfQU/totXnEnIptk/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://lh5.googleusercontent.com/-OUDrOT1ESZc/UQAFcgXyxTI/AAAAAAAAfQU/totXnEnIptk/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

posizione-cursore

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.

widget-articoli-simili-miniature

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.




31 commenti :

  1. Sei un grande Ernesto, con questo post ho risolto tutti i problemi relativi alle miniature su dominio personalizzato! Sul mio blog ho messo un grazie davanti all'antipixel, mi sembra il minimo per il contributo che ci dai!

    RispondiElimina
  2. Ehi ciao! Mi servirebbe proprio una mano, che spero mi potrai dare.
    Ho comprato il "dominio" del blog qualche giorno fa e oggi ho pensato che non avevo mai ricorso ai "post correlati", ho provato con questa procedura ma quando provo ad aprire l'anteprima non mi dà segni di riuscita, anzi... non carica neanche il gadget dei followers lol, però lo vedo se vado sul blog. Please help (non saprei gestire quelle cose di dropbox ecc, vorrei solo riuscirci con questo, ma non capisco perché non lo visualizzi nell'anteprima :/)

    Grazie mille in anticipo!

    RispondiElimina
    Risposte
    1. @# Onestamente non capisco. Sul blog il widget si vede o no? Si vede, quindi va bene. Che ti frega dell'anteprima! E poi sull'anteprima non si deve vedere perché ci sono i tag condizionali che lo fanno visualizzare solo nei post e non nella homepage come deve essere perché le etichette sono nei singoli articoli.

      Elimina
  3. Non ho provato perché non ho mai dovuto fare cose così grandi per cui dover salvare il template, io vorrei che le anteprime invece ci fossero anche nell'home page, come su the blonde salad della Ferragni, per intenderci. PRoverò salvando il template...! ma comunque se conosci un modo per mostrare posts correlati anche nella home sotto ogni anteprima del post let me know, grazie!

    RispondiElimina
    Risposte
    1. @# Per sicurezza devi comunque scaricare e salvare un template, non si sa mai, è una specie di assicurazione. Per vedere gli articoli correlati in tutte le pagine basta togliere i tag condizionali nel secondo codice, cioè questa riga
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      e quest'altra
      </b:if>

      Elimina
    2. Ok ce l'ho quasi fatta, sei un mito e ti ringrazio davvero per la pazienza. Ultime due cosucce. Ce l'ho fatta ma... nel widget le anteprime dei post non sono perfettamente centrate (ho regolato le larghezze del blog per farlo sembrare ma non è comunque precisissimo (anche il titolo "potrebbe interessarti anche" non è centrato), come faccio?
      E poi ultimissima cosa la qualità della foto in anteprima è pessima, non c'è un modo per migliorarla, ho aumentato i px ma diventano solo più grandi e più sgranate. Thanks! :D

      Elimina
    3. @# La qualità delle immagini è quella delle miniature di Blogger che è di 72x72 pixel quindi fino a 80-85 pixel vanno bene poi si sgranano. Per centrare bisogna conoscere la classe o l'ID dell'elemento analizzando la pagina con Firebug. Non ho il tempo per farlo ma ti linko la pagina, puoi provare a farlo da solo
      http://www.ideepercomputeredinternet.com/2011/05/firebug-e-una-estensione-di-firefox-per.html
      http://www.ideepercomputeredinternet.com/2012/07/firebug-chrome-blogger-css-html.html

      Elimina
    4. Grazie mille per tutto, davvero! :)

      Elimina
    5. Ciao, ho inserito anche io questo widget modificandone la dimensione e visualizzando 4 post ma più grandi.. come è possibile intervenire sulla miniatura lavorando sul codice? Grazie, Alex

      Elimina
    6. Leggi la riga 13) delle personalizzazioni
      @#

      Elimina
    7. Si già fatto :) già impostato la grandezza, sfondi tutto, volevo solo capire come intervenire sulla risoluzione delle miniature

      Elimina
    8. Risoluzione e dimensione in questo caso sono la stessa cosa. Non capisco che intendi. È possibile settare larghezza e lunghezza delle miniature. Punto.
      @#

      Elimina
  4. Salve Ernesto, ho provato a inserire questo widget nel mio dominio seguendo la tua procedura ma quando salvo poi comunque non viene visualizzato.Come mai? ho sbagliato qualcosa?

    RispondiElimina
    Risposte
    1. @# Se hai sbagliato non posso saperlo. Si tratta dello stesso widget che ho anch'io quindi il codice funziona. Ricordati che deve essere visto solo nei post che abbiano delle etichette. Se hai provato in un blog di prova potrebbe dipendere da quello o dai pochi post.

      Elimina
  5. Seguo spesso il tuo blog e mi ha aiutato tantissimo a modificare il mio blog.
    Attuamelmente sto facendo pratica con weebly, ho creato un sito è abbastanza facile e di utili contenuti, ma mancano alcune cosette del tipo "gadget per articoli recenti" "gadget per articoli più letti".
    Secondo me sono fondamentali per un sito questi gadget, ma non riesco ad istallarli, volevo chiederti se magari tu sapresti farlo?
    Aspetto una tua risposta, a presto!

    RispondiElimina
  6. ti scrivo anche su quest'altro articolo perché purtroppo sto incontrando delle difficoltà... nello specifico il box degli articoli simili compare ma è completamente bianco (non si vedono le miniature, ne il titolo, ne i titoli dei singoli post ma è fisicamente presente)...
    Ovviamente ho guardato all'interno del post e non nella home e ho provato ad installarlo anche nel mio blog "vero" oltre a quello di prova perché ho pensato potesse dipendere dai pochi articoli presenti su quest'ultimo... da cosa pensi possa dipendere...?

    Grazie di nuovo...! :)

    RispondiElimina
    Risposte
    1. Qesto widget è presente anche in questo blog quindi escludo che abbia smesso di funzionare. Prova a cambiare il posizionamento oppure a mettere un numero più piccolo a max-results=7 presente in entrambi i codici
      @#

      Elimina
    2. C'è anche la possibilità che tu abbia aperto un post senza etichette o con pochi altri articoli con la stessa etichetta
      @#

      Elimina
  7. dopo aver provato diversi tipi di widget , finalmente questo funziona anche nel mio blog, grazie!

    RispondiElimina
  8. Funziona alla grande, grazie!

    RispondiElimina
  9. io vorrei inserire qualche widget degli articoli correlati con IMMAGINI, non dentro il modello di Blogger bensì come widget così da poterlo spostare nella sidebar. So caricare i codici su Google drive ad esempio, ma non so' come renderlo funzionante su Blogger, cioè come lo dovrei incorporare il codice per farlo funzionare? E' fattibile questa cosa?

    RispondiElimina
    Risposte
    1. Assolutamente fattibile anche se non ho testato. Ci sono due difficoltà. La prima è quella dei tag condizionali e la seconda quella del linguaggio XML da convertire in HTML.
      1) Incolla il codice dei CSS così com'è e nella posizione indicata
      2) Il secondo codice andrebbe invece nella sezione < body > quindi per metterla in un widget HTML/Javascript va convertito
      3) Togli le due righe dei tag condizionali che sono la seconda e la penultima in questo post
      4) Il codice restante convertilo in HTML incollandolo in questo sito
      http://www.freeformatter.com/xml-escape.html
      e cliccando su Unescape
      5) Inserisci i tag condizionali seguendo le istruzioni della sezione
      COME USARE I TAG CONDIZIONALI NEI WIDGET
      in questo post
      http://www.ideepercomputeredinternet.com/2013/03/tag-condizionali-blogger.html

      P.S. Non so se funzionerà per questo specifico widget perché ci sono dei tag di Blogger
      http://www.ideepercomputeredinternet.com/2012/01/cosa-sono-e-cosa-significano-i-tag-di.html
      che potrebbero non funzionare in une elemento pagina HTML però il concetto è questo
      @#

      Elimina
    2. Ti ringrazio anche qualora non dovesse funzionare (ci sono sempre gli altri widget eventualmente), mi sfuggiva l'esistenza di tool come xml-escape, o della possibilità di convertire xml in html.

      Elimina
  10. Utile grazie,quindi se ho capito bene posso usarlo sul mio sito che ha un proprio dominio ma ospitato su blogger? Inoltre per visualizzare il gadget nella versione mobile devo aggiungere qualche stringa? Grazie e complimenti.

    RispondiElimina
    Risposte
    1. Ernesto, sei un grande!! Ti comunico che il codice funziona ,lo vedo però solo nella vesrione desktop,non nel mobile.Hai dritte in merito?? Inoltre ti comunico che nel mio template per il secondo codice ho dovtuo cercare la stringa < div class='post-footer-line post-footer-line-3'/ > e non quella da te indicata. ........attendo tue con pazienza. Grazie e complimenti ancora

      Elimina
    2. Ci sono due occorrenze da modificare per cambiare il numero delle miniature. Per installarlo nella versione mobile segui questo post
      http://www.ideepercomputeredinternet.com/2015/07/related-posts-widget-blogger-mobile-desktop.html
      @#

      Elimina
  11. Grazie Ernesto,utilissimo. Sa per caso come ELIMINARE l'antiestetico spazio che resta nella versione mobile tra il widget articoli più letti e il banner soprastante.
    Ecco un esempio
    http://www.risparmioebenessere.it/2015/09/come-investire-oggi-consigli-utili-e-riflessioni-sul-tema.html?m=1

    Grazie

    RispondiElimina
    Risposte
    1. Usa il tool Analizza Elemento o Ispeziona Elemento insieme a Screenfly per la visualizzazione da mobile
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.