Pubblicato il 26/02/14 - aggiornato il  | 17 commenti :

Widget dei titoli e delle miniature degli articoli simili o correlati alla fine del post in Blogger.

Widget degli Articoli o Post Simili o Correlati per blog su piattaforma Blogger da visualizzare alla fine di ciascun articolo.
La frequenza di rimbalzo o bounce rate è la percentuale dei lettori che abbandonano un sito web nel giro di 30 secondi dopo averne scorso solo i primi contenuti. In realtà su Google Analytics possiamo avere dei dati ancora più dettagliati e vedere quanti sono coloro che ci lasciano dopo 5, 10 o 20 secondi. Avere una frequenza di rimbalzo bassa per un sito significa essere maggiormente considerato dai motori di ricerca che lo premieranno con un migliore posizionamento.

Sono molti i fattori che incidono in tal senso a cominciare dall'incipit del post, dalla velocità di caricamento del sito e ovviamente dalla bontà dei contenuti pubblicati. Un aiuto importante lo possono dare i widget che mostrano gli Ultimi Post del blog, gli Articoli più Popolari e quello degli Articoli Simili. In riferimento a quest'ultimo gadget ne ho già illustrate diverse versioni e adesso vado a presentarne un'altra per tutti i blog di Blogger anche con dominio personalizzato visto che non ci sono javascript esterni. Alla fine del post si visualizzeranno i titoli e le miniature di altri articoli che abbiano almeno una etichetta in comune con il post che è stato aperto

articoli-simili-blogger

Dopo aver salvato il template si va su Modello > Modifica HTML e si clicca sull'area del codice con il sinistro del mouse. Successivamente si digita Ctrl+F per visualizzare il campo di ricerca in cui si incolla la riga </head> . Si pigia su Invio e sul modello verrà evidenziata tale riga. Subito sopra si incolla il codice

<!-- Articoli Simili Inizio -->
<style>
#articoli_simili {
float: left;
width: 560px;
height: 230px;
}
#articoli_simili h2 {
margin-top: 20px;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #036;
font-weight:bold;
font-size: 20px;
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://lh3.googleusercontent.com/-RAnn1Fg7-kk/Uw27c87ifqI/AAAAAAAAmDk/9zycgtWHvEs/s130/default-image.png&quot;;
var maxresults=4;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Articoli Simili:&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var rel_titoli = new Array();
var titoli_num = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
rel_titoli[titoli_num] = entry.title.$t;
try
{thumburl[titoli_num]=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[titoli_num]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[titoli_num]=defaultnoimage; else thumburl[titoli_num]="https://lh3.googleusercontent.com/-RAnn1Fg7-kk/Uw27c87ifqI/AAAAAAAAmDk/9zycgtWHvEs/s130/default-image.png";}
}
if(rel_titoli[titoli_num].length>35) rel_titoli[titoli_num]=rel_titoli[titoli_num].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[titoli_num] = entry.link[k].href;
titoli_num++;
}
}
}
}
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] = rel_titoli[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
rel_titoli = 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)||(!rel_titoli[i]))
{
relatedUrls.splice(i,1);
rel_titoli.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((rel_titoli.length - 1) * Math.random());
var i = 0;
if(rel_titoli.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < rel_titoli.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:120px;height:90px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;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; text-align:center;">'+rel_titoli[r]+'</div></a>');
i++;
if (r < rel_titoli.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
rel_titoli.splice(0,rel_titoli.length);
}
//]]>
</script>
</b:if>
<!-- Articoli Simili Fine -->

Si clicca su Vai al widget > Blog1 e si cerca la sezione
<b:includable id='post' var='post'>
Si scorre il codice oppure, mediante Ctrl+F, si cerca la riga
<data:post.body/>
Subito sotto a questa si incolla questo secondo codice

<!-- Articoli Correlati 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=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div></b:if>
<!-- Articoli Correlati Fine -->

Finalmente si può salvare il modello. Ricordo che nella Anteprima non si visualizzerà alcuna modifica perché le miniature degli articoli simili saranno visibili solo quando si apra un post.

PERSONALIZZAZIONI PIÙ RILEVANTI

  1. Modificando var maxresults=4; si può mostrare un numero di miniature diverso da 4
  2. width: 560px; e height: 230px; sono le dimensioni totali del gadget
  3. Si può modificare il codice del colore del titolo del widget - color: #036;
  4. La dimensione dei caratteri del titolo del widget è font-size: 20px;
  5. Si possono personalizzare il titolo del gadget "Articoli Simili" e il colore tra le miniature #fff
  6. L'URL della immagine di default colorato di viola quando nel post non ci fossero immagini
  7. Le dimensioni delle miniature sono width:120px; height:90px
  8. Il titolo del post simile ha parametri font-weight: bold; font-size: 14px; cioè ha un carattere di 14 pixel ed è in grassetto. Per togliere il grassetto si può mettere normal al posto di bold
  9. Il tag text-align:center serve centrare il titolo sotto la miniatura
Cliccando su una miniatura o su un titolo verrà aperto il post relativo.


17 commenti :

  1. ciao Ernesto, ho seguito tutti i passaggi ma non si vede nulla sul blog! www.vitazerotre.com. Tralaltro non riesco più ad utilizzare linkwithin perché non mi genera più il codice.

    RispondiElimina
    Risposte
    1. Su LinkWithin non mi pronuncio. Il tuo blog probabilmente ha un modello scaricato da internet e quindi le modifiche che sono testate per template ufficiali di Blogger spesso non funzionano.
      @#

      Elimina
    2. Allora non ti so dire perché non funzioni
      @#

      Elimina
  2. ciao, io l'ho fatto, ma gli articoli simili si vedono solo quando visualizzo il singolo post cliccando sopra al titolo, mentre nella home page non compaiono. secondo me è lo stesso problema che aveva vita a zero-tre, anche se io ho provato e non si vedono, da lui, efettivamente.
    inoltre ho un altro problema: gli artioli simili sono due sotto e due sopra, invece che tutti in fila, e coprono in parte i commenti, una cosa assolutamente antiestetica...

    RispondiElimina
    Risposte
    1. ho visto rileggendo il post che avevi scritto che le miniature si vedono solo quando apri un post... però mi resta il problema delle miniature due sotto e due sopra...

      Elimina
    2. Leggi le Personalizzazioni più rilevanti.
      Gli articoli simili sono quelli che hanno almeno una etichetta in comune con quello che si sta visualizzando. Hanno senso solo nei post e non in homepage o altri tipki di pagine.
      Per risolvere il problema delle minaiture modifica la larghezza del widget passando da width: 560px; a un valore più elevato oppure passa da 4 a 3 o 2 per le etichette da visualizzare. Prova a modificare anche la dimensione delle minaiture width:120px;height:90px;

      Elimina
  3. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  4. Nel link sottostante ho visto cheè possibile inserirlo anche nelle "dinamiche".
    Puoi darmi delle indicazioni?
    Grazie

    guney59.blogspot.it/2013/02/dinamik-blog-yaz-paylasm-ipuclar.html

    RispondiElimina
    Risposte
    1. È un blog turco ma non mi pare parli del widget presente in questa pagina
      @#

      Elimina
    2. Infatti, non parla del Witget in oggetto. Volevo solo evidenziare che nelle visualizzazioni dinamiche è possibile inserirlo.
      Magari conoscere la metodologia di inserimento. ..

      Elimina
    3. Ecco, trovato. Per tutti gli interessati:
      guney59.blogspot.it/2012/11/linkwithin-widgetini-dinamik-bloguna-kur.html?

      Elimina
  5. Risposte
    1. Ora l'ho vista. Magari ci faccio un post, grazie
      @#

      Elimina
    2. Grazie a Te. Bene, allora aspettiamo con impazienza il tuo post. ;)

      Elimina
  6. E' possibile solo nelle visualizzazioni dinamiche sidebar.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy