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:
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:
#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.
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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBStEaNdwK3SpTvb3_hgaQ138lGaVoRCqZ0gxYvkkl28wFC1jduy4-JeHkFuijhEc8vLKI3wyrFhIJTEWg9XSK6_ZmnxyyCNRvSkHCgSghPnMJsRXIcsFJ2HYMzvgfT2HQe2RVEs9LLkM/s1600/default-image.png";
var maxresults=7;
var splittercolor="#d4eaf2";
var relatedpoststitle="Articoli Simili";
</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 == "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=6"' 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 -->
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.
