Scuolissima.com - Logo

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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBStEaNdwK3SpTvb3_hgaQ138lGaVoRCqZ0gxYvkkl28wFC1jduy4-JeHkFuijhEc8vLKI3wyrFhIJTEWg9XSK6_ZmnxyyCNRvSkHCgSghPnMJsRXIcsFJ2HYMzvgfT2HQe2RVEs9LLkM/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.



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




© Scuolissima.com - appunti di scuola online! © 2012 - 2024, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies