Inserire il widget degli articoli simili basato sulle etichette

Il widget degli articoli correlati è uno dei più utili e pratici che si possa inserire su un blog perchè permette al lettore di vedere i collegamenti con gli argomenti simili  e quindi aiutarlo nella ricerca mirata degli articoli più interessanti e, allo stesso tempo, aiuta la visibilità del blog stesso focalizzando l'attenzione sugli argomenti in base alle preferenze del lettore.
Il widget degli articoli simili che sto per proporvi (e che non è ovviamente una mia creazione ma è di Aneesh, autore di Blogger Widget )
si basa sulle etichette, quindi sulle chiavi che voi stessi sceglierete per identificare gli argomenti di cui scrivete e utilizza come miniature le immagini stesse inserite nei post. Di conseguenza per avere un risultato graficametne interessante occorrerà inserire anche alcune immagini nei post, facendo attenzione a sceglierle secondo criteri di pertinenza e con un peso accettabile che non pregiudichi il caricamento della pagina.

Ecco come procedere per inserire il widget degli articoli correlati:
Andre in Layout, modifica html , espandere i modelli widget e cercare la riga

</head>

inserire immediatamente sopra il seguente codice
<!-- Articoli Correlati -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: #000000; /* Colore del Titolo */
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#CC0000;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!-- Articoli correlati -->


Potrete personalizzare a piacere i seguenti aspetti:
- colore del titolo delle miniature, in questo caso #000000 ovvero nero, potrete sostituirlo con un colore a vostra scelta
 - colore dello sfondo al passaggio del mouse, in questo caso #CC0000, sostutibile con un colore a vostra scelta

 Vi ricordo i principali colori, rimandandovi a questo articolo per ulteriori personalizzazioni
#E1771E   arancione
#CC0000  rosso
#0000FF  blu
#6728B2  viola
#000000  nero
#FFFF66  giallo
#008000  verde
#FFFFFF  bianco

Se poi avete un hosting personale potete cambiare il link http://blogergadgets.googlecode.com/files/relatedthumbs21.js sostituendolo  con quello del vostro hosting dove avrete scaricato il file javascript per potervi assicurare un controllo totale del widget ed evirare quindi il sovraccarico della banda con conseguente assenza temporanea delle visualizzazioni.
Andiamo avanti.

Ora dovrete cercare questa riga
<div class='post-footer-line post-footer-line-1'>
in alcuni modelli è assente perchè sostituita da questa
<p class='post-footer-line post-footer-line-1'> 

trovata la riga di riferimento dovrete scrivere immediatamente dopo il seguente codice:

<!-- Articoli Correlati -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5; /* Numero di Articoli Simili */
var relatedpoststitle="Ti potrebbero anche interessare:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Articoli Correlati http://opinionidirette.blogspot.com-->



In questo caso potrete personalizzare il numero degli articoli da visualizzare (in questo caso, 5) e il titolo del widget  "Ti potrebbero anche interessare" sostituibile a piacere con altro testo a vostra scelta.

11 commenti:

Marco Peluso ha detto...

Ciao fino al primo punto tutto ok, solo che non trovo nessuno dei due codici del secondo punto. potresti aiutarmi? :-) il mio blog è http://www.mb-mac.com/

Bblogger ha detto...

ciao Marco, per provarci dovrei vedere il tuo codice, scrivimi quì
e vediamo se riesco a darti una mano

Marco Peluso ha detto...

risolto!!!!! non avevo cliccato "espandi i modelli widget" grazie cmq dell' aiuto :-*

Bblogger ha detto...

:-)

bellimbusto blogger ha detto...

grazie della guida, ha funzionato subito anche nel nuovo blogger, basta ricordarsi di espandere i widget prima di procedere alle aggiunte.


Ciao,


Salvatore

Nicole ha detto...

Non riesco a farlo funzionare, avevo provato anche con linkwithin ma mi dava sempre i soliti 3 post, ho seguito le istruzioni alla lettera ma niente, cosa posso aver sbagliato?

www.bloggerfacilissimo.blogspot.com ha detto...

Quanti articoli hai? tutti con etichette? etichette diverse o cicliche?

Nicole ha detto...

Ho più di 70 articoli, tutti con etichette cicliche, ci sono etichette con solo 2 articoli, ma altre ne hanno 10 o 20.

Anonimo ha detto...

ma il widget l'hai tolto? perchè non lo vedo, e mi è difficile valutare il problema senza vedere il risultato

sweetsugar ha detto...

ciao!intanto grazie dell'aiuto!purtroppo però non mi funziona..ho fatto tutto alla lettera..ma nel mio blog non compare nulla!dove ho sbagliato?!

barbara gastaldi ha detto...

Difficile dire dove hai sbagliato, prova a ripetere la procedura.