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 == "item"'>
<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, “Times New Roman”, 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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
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.
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 == "item"'>
<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, “Times New Roman”, 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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
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.
Commenti
e vediamo se riesco a darti una mano
Ciao,
Salvatore