Come aggiungere gli articoli simili su Blogger


Gli articoli simili o correlati sono un widget che quasi tutti i blog inseriscono alla fine del post e che mostra i post pubblicati più "affini", su Blogger s'intendono tutti quei post inseriti all'interno della stessa etichetta.

Sono utili soprattutto per gli utenti perché riescono facilmente a trovare articoli di maggiore interesse e di conseguenza anche per coinvolgere maggiormente gli utenti e quindi incrementando la loro permanenza sul blog. Più gli utenti rimangono all'interno del vostro blog e più possibilità ci sono che otteniate guadagni attraverso le vendite o più semplicemente commenti e feedback positivi. In sintesi sono un widget indispensabile e per questo ne esistono di diverse tipologie; quello di questo articolo è ben fatto in quanto mostra la prima immagine presente nel post e il titolo anche in forma abbreviata.

Questo qui sotto è l'anteprima (la prima miniatura ha uno sfondo più scuro perché è stata selezionata con il mouse):



Per aggiungere gli articoli simili su Blogger dovete andare su Modello > Modifica HTML e prima del tag </head> dovete inserire il seguente codice:
<!--Articoli Simili con Miniature Inizio-->
<style type='text/css'>
#articoli-simili {float:center;text-transform:none;height:175px;background-color: #f6f6f6; 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: 10px 15px; font-family: Helvetica, Arial; line-height: 1.1em; font-weight: bold; text-shadow: 0 1px 0 white; font-size: 20px; letter-spacing: -1px;color:#333; background: #E4E4E4; border: 1px solid white;width:auto;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;}
#articoli-simili a{color:#191919;}
#articoli-simili a:hover {background-color: #191919;color: white; font-weight: bold; text-decoration: initial;}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://1.bp.blogspot.com/-DhrD4UKaqzc/VEVkiDAlihI/AAAAAAAAZak/7QyNAIQXmzc/s1600/default-image.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Articoli Simili&quot;;
</script>
<script src='https://sites.google.com/site/scuolissima1/home/archivio/articoli-simili-miniature.js' type='text/javascript'/>
<!--Articoli Simili con Miniature Fine-->

Sempre rimanendo nel modello dovete cercare la riga <div class='post-footer-line post-footer-line-3'> e qualche riga più sotto troverete i tag </div></div> </b:includable> tra quelli in rosso e quello rosaceo dovete inserire un nuovo codice...



...che è il seguente:
<!-- 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=6&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 -->

Personalizzazioni

max-results=6 --> Per modificare il numero
#191919 --> per modificare il colore dello sfondo e del testo al passaggio del mouse.
L'url evidenziato in rosso è l'immagine che appare quando non è presente alcuna immagine dentro il post da visualizzare.

Essendo lo script caricato su Google Sites funzionerà solo per tutti i blog con il dominio free (con la scritta blogspot), chi possiede un dominio personalizzato dovrà scaricarlo e caricarlo su un hosting differente.



2 commenti :

  1. ciao complimenti per la guida; ho seguito alla lettera tutto il tuo post, ho incollato correttamente i codici e sotto gli articoli mi compare la sezione degli articoli simili, e fin qui tutto ok; il problema è che non mi compaiono le immagini degli articoli simili ed inoltre non c'è la descrizione; come mai accade questo? puoi aiutarmi a risolvere questo problema? grazie

    RispondiElimina
    Risposte
    1. Vedo che ti funziona normalmente, appare sia il titolo sia l'immagine di anteprima. La descrizione non appare perché non è prevista e tra l'altro è sconsigliata usarla per i widget di articoli simili in quanto lo spazio è troppo stretto.

      Elimina

I commenti dovranno prima essere approvati da un amministratore. Verranno pubblicati solo quelli utili a tutti e attinenti al contenuto della pagina. Per commentare utilizzate un account Google/Gmail, altrimenti la modalità "anonimo".