- Home
- Post archiviati in articoli correlati
Pubblicato il 12/04/15 - aggiornato il | 10 commenti :
Widget degli Articoli Correlati per Blogger.
Pubblicato il 23/01/13 - aggiornato il | 25 commenti :
Widget degli Articoli Simili con Miniature e Tooltip.

Pubblicato il 11/04/11 - aggiornato il | 9 commenti :
Widget degli Articoli Simili per Blogger.
Dopo aver presentato il gadget degli Articoli Correlati ho provato a installarlo in questo blog e, con sorpresa, ho visto che non funzionava. Come test avevo usato un template del Designer Modelli e lo avevo provato solo uno dei vecchi template. Mi sono quindi messo all'opera per risolvere la questione e per rendere il widget esteticamente ancora più apprezzabile. Coloro che avessero quindi delle difficoltà di installazione possono seguire questi passaggi invece del tutorial di cui al post citato. La differenza sostanziale sta nell'inserire i CSS direttamente nella sezione <b:skin> invece di inglobarli in <head> dentro il tag <style>. Con questo metodo è stato infatti possibile visualizzare correttamente il widget.
Si va su Design > Modifica HTML e si salva il modello completo. Si mette la flag su espandi modelli widget e si cerca la riga ]]></b:skin>. Immediatamente sopra si incolla questo codice
/* Articoli Correlati Inizio */
#articoli_correlati { float : left; width : 750px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Trebuchet MS; margin-bottom:10px; } #articoli_correlati .widget { list-style-type : none; margin : 4px 0 4px 0; padding : 0; } #articoli_correlati .widget h2, #articoli_correlati h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #articoli_correlati a { text-decoration : none; } #articoli_correlati a:hover { text-decoration : none; } #articoli_correlati ul { border : medium none; margin : 10px; padding : 0; } #articoli_correlati ul li { display : block; background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijXNgaL68ZQOJxp0sWcxEz06yygqcvKhKHIhAO2rsg_AYwg6BrlkI04dWjUPm56NplVyOAD4nynGdT9ZtdwZbTxtUDgu0KPl6h92Pj41vMySjTBwsdD7FOG2rjpiyx25IsHk8yKad3xM8/) no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #003366; }
/* Articoli Correlati Fine */
Per le personalizzazioni vi rimando all'articolo precedente ricordando che
Pubblicato il 09/04/11 - aggiornato il | 10 commenti :
Articoli simili, correlati per etichetta, da inserire alla fine dell'articolo in un blog su Blogger.
Qualche mese fa ebbe un grande successo il widget LinkWithin che inseriva degli articoli simili a quelli dell'articolo corredati da miniature. Questo gadget non è personalizzabile in quanto lo script è nei server della società che lo ha creato. Ultimamente è meno utilizzato perché, visto che la velocità di caricamento è diventata un importante parametro per determinare la SERP di una pagina, gli webmaster tendono a alleggerire i blog gli widget troppo pesanti. Per mostrare alla fine del post altri articoli con argomento simile si tende quindi a scegliere dei gadget che mostrino solo l'elenco dei titoli di altri post che hanno le stesse etichette di quello visualizzato.
Quello che vado a presentare ha la particolarità di essere abbastanza leggero ma anche non disprezzabile dal punto di vista estetico. Si va su Design > Modifica HTML e, dopo aver salvato il template, si cerca la solita riga </head>, subito sopra si incolla questo codice
<!-- Articoli Correlati Inizio -->
<style> #articoli_correlati { float : left; width : 530px; margin-top:20px; margin-left : 5px; margin-bottom:15px; font : 11px Verdana; margin-bottom:10px; } #articoli_correlati .widget { list-style-type : none; margin : 4px 0 4px 0; padding : 0; } #articoli_correlati .widget h2, #articoli_correlati h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #articoli_correlati a { text-decoration : none; } #articoli_correlati a:hover { text-decoration : none; } #articoli_correlati ul { border : medium none; margin : 10px; padding : 0; } #articoli_correlati ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtMzRY3TN3ZoIXAM-LdmKUUbimEgAUWHnN_TWj5a1G_LTpd6PdGW29Vgq53q6JGZptjnugIFFVzoj-ZHaXlA_ORNjXqJYfSSdcDsKs2jWSLP6i0RlgrhyKtUGKkLAzOWafu40GwSf4d0Y/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/scriptperilblog/javascript-2/articoli-simili.js' type='text/javascript'/>
<!--Articoli Correlati Fine - www.ideepercomputeredinternet.com -->
Le personalizzazioni da fare sono molte ma solo di adattamento al nostro template. Riguardano la larghezza (width), i margini, la dimensione dei caratteri, lo stile dei bordi (border-bottom:1px dotted #cccccc;) che è punteggiato di grigio e la icona che si visualizza sulla sinistra di ogni articolo, che ha l'URL evidenziato di viola e che può essere sostituita da un'altra a nostro piacimento. Ricordo che ha dimensioni 16x16 pixel e che è in formato PNG.
Pubblicato il 02/01/10 - aggiornato il | 140 commenti :
Il widget degli articoli correlati con miniature per un blog su Blogger.
</head>e, immediatamente sopra, incollate il seguente codice
<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: #191919; /* Colore del Titolo */
font-family: Georgia, “Times New Roman”, Times, serif;Trebuchet MS”
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:#FDBCB7;
}
</style>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js' type='text/javascript'/>
</b:if>
<!-- Articoli simili con Miniature-->
Adesso cercate questa riga
<div class='post-footer-line post-footer-line-1'>nel caso in cui no0n fosse presente cercate quest'altra <p class='post-footer-line post-footer-line-1'> e, immediatamente dopo, incollate il codice
<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.ideepercomputeredinternet.com/2010/01/il-widget-degli-articoli-correlati-con.html' style='display:none;'>Widget degli articoli correlati con miniature per Blogger</a><a href='http://www.ideepercomputeredinternet.com/' style='display:none;'>Idee per Computer ed Internet</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=6; /* Numero di Articoli Simili */
var relatedpoststitle="Ti potrebbero anche interessare:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Articoli Simili con Miniature -->
La scelta interessante riguarda anche la frase che si vuole vedere sopra le miniature degli articoli correlati. Ho messo "Ti potrebbero anche interessare" che è identica a quella del widget LinkWithin. Salvate il modello.
Come vedete è molto simile al widget LinkWithin e può esserne un'interessante alternativa.
Avviso importante: Se avete un dominio personalizzato vale a dire del tipo www.dominio.com, allora il widget non funzionerà. Per risolvere dovete scaricare questo javascript
https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js
caricarlo su Dropbox nella cartella Public e ottenere il link diretto andando su Copy Public link. Tale URL dovrà essere incollato nel codice al posto di quello originario.
Pubblicato il 07/11/09 - aggiornato il | 19 commenti :
Come inserire il widget degli articoli simili con miniature completamente personalizzabile.
</head>e, immediatamente sopra, inseriamo il seguente codice
<!-- Articoli Simili -->Le personalizzazioni da fare riguardano il colore del titolo delle miniature (#191919) e quello di sfondo delle stesse quando vengono puntate con il mouse (#FDBCB7). Possiamo anche scaricare il file Javascript il cui URL è evidenziato di rosso e caricarlo su un nostro hosting per averne sempre il controllo in caso di blackout del sito su cui è caricato o superamento della larghezza di banda da parte degli utenti.
<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: #191919; /* 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:#FDBCB7;
}
</style>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/articoli-simili-miniature.js' type='text/javascript'/>
</b:if>
<!-- Articoli simili -->
Adesso cercate una delle seguenti righe (la prima dovrebbe essere presente in quasi tutti i modelli, altrimenti cercate la seconda)
<div class='post-footer-line post-footer-line-1'>e, immediatamente dopo alla linea che avete trovato, tra le due indicate, inserite quest'altro codice
oppure
<div class='post-footer-line post-footer-line-2'>
<!-- Articoli Simili -->Le personalizzazioni in questo caso riguardano
<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=4; /* Numero di Articoli Simili */
var relatedpoststitle="Ti potrebbero anche interessare:";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Articoli Simili -->
- Il numero di miniature da mostrare: si può sostituire a 4 un numero più piccolo o più grande in var maxreults
- Il titolo del widget che ho inserito identico a quello di LinkWithin "Ti potrebbero anche interessare" e può essere ovviamente modificato.
Pubblicato il 30/07/09 - aggiornato il | 11 commenti :
Utilizzare contemporaneamente il widget degli articoli correlati e quello LinkWithin in Blogger.
Il widget degli articoli correlati è indubbiamente importante in un blog che fa dei tutorial e dei contenuti il suo punto di forza. Mostrare alla fine dell’articolo tutta una serie di post che hanno delle etichette simili aiuta il navigatore nel trovare altri articoli che lo possono interessare.
Contrariamente a quanto si potrebbe pensare coloro che cliccano realmente su gli articoli correlati che si trovano nella parte bassa della pagina non sono però molti anzi direi decisamente pochi
forse dipende da questo modello o dal fatto che i lettori molto spesso si limitano a leggere la parte alta della pagina. Nell’articolo succitato si può inserire una personalizzazione come numero di articoli da visualizzare per ogni etichetta. All’inizio avevo messo 10 e con alcune tag si vedeva un elenco lunghissimo, adesso sono sceso a 3 quindi il numero degli articoli correlati è decisamente più basso e riguarda articoli più recenti. Nonostante questa scrematura quelli che ci cliccano sopra rimangono in pochi.
Un widget che ha funzioni simili a questo ma oserei dire complementari è quello denominato LinkWithin che si installa automaticamente. E’ molto efficiente ma ha il difetto di non essere personalizzabile
Alla fine di ogni post vengono proposte le miniature di altri tre articoli che potrebbero interessare il lettore. La particolarità di questo script è che non necessariamente questi articoli sono correlati da delle comuni etichette ma sono scelti con un algoritmo che non risiede nel nostro blog ma che comunque è efficace perché coloro che ci cliccano sono più numerosi di quelli che aprono gli articoli correlati.
Secondo me i widget possono benissimo coesistere visto che svolgono ruoli differenti e danno entrambi un servizio ai visitatori.
Per l’installazione dei widget vi rimando agli articoli citati, ricordo solo che il miglior posizionamento è al di sotto dell’articolo con LinkWithin messo più in alto dei related posts
Pubblicato il 19/05/09 - aggiornato il | 75 commenti :
Come inserire il widget LinkWithin dei Related Post in Blogger per visualizzare le miniature dei post correlati solo negli articoli.
Qualche giorno fa passando per il blog Trendy Nails, ebbene sì lo confesso mi interesso pure di unghie smaltate, ho visto un widget interessante sui post correlati che non conoscevo e che intendo proporre riveduto e corretto.
LinkWithin permette di inserire al di sotto dei post, o in qualsiasi altro punto del layout, delle miniature di articoli che sono collegati con quello che viene visualizzato oppure scelte in modo casuale. Quello che è fondamentale nel widget è la ricerca di immagini. Quindi è adatto per blog fotografici o che fanno largo uso di questi elementi.
L’ho installato nel mio blog di supporto con il procedimento che adesso mi appresto ad illustrare.
Inserire nel modulo la nostra email, l’URL del blog, selezionare la piattaforma e mettere il segno di spunta nel caso si avesse un blog con lo sfondo scuro ed il testo di colore chiaro, quindi cliccare su Get Widget
Successivamente cliccare su Install Widget nello Step 1
Selezionare il blog nel caso se ne aveste più di uno, dare un nome al widget (Articoli Correlati) quindi cliccare su Aggiungi Widget
Adesso andare in Layout > Elementi pagina e con il mouse posizionare l’elemento immediatamente sotto all’area dell’articolo
Non resta che salvare il modello e visualizzare il blog. Ci si rende subito conto di una cosa non proprio esteticamente valida. Il widget sarà presente anche in homepage; quindi se in homepage abbiamo sette post si vedrà lo stesso widget per sette volte. Sopra il widget campeggerà la scritta “You might like these stories:” che purtroppo non può essere modificata con una in italiano
Quello che si può fare è però di visualizzarlo solo nei post e non in homepage o nelle pagine di archivio.
Andiamo in Layout > Modifica HTML e, dopo aver scaricato il modello per sicurezza, senza espandere i modelli widget cerchiamo la porzione di codice con gli articoli correlati, se avete inserito proprio questo nome,
In questo caso ha il numero di identificazione HTML4. In un altro modello ne può ovviamente avere un altro. Adesso espandiamo i modelli widget e cerchiamo questo stesso codice in una forma più estesa
Per fare in modo che si veda solo negli articoli dobbiamo inserire le seguenti righe di codice colorate di rosso nella posizione indicata
<b:widget id='HTML4' locked='false' title='ARTICOLI CORRELATI' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<data:content/>
</b:if>
</b:includable>
</b:widget>
come mostrato nel seguente screenshot
Salviamo il modello. Adesso le miniature degli articoli simili saranno visibili solo se si apre un singolo post e non saranno più visibili in Homepage.
Per un prova aprite il mio blog di supporto e vedrete che le miniature sotto i post appariranno solo nel caso in cui apriate un articolo.
Aggiornamento: E' adesso possibile selezionare il numero di miniature da visualizzare sotto il post. Nel mio caso, visto che ho un modello largo, ho scelto il numero di cinque che è il massimo possibile.
Aggiornamento n°2: Mi è stato detto giustamente in un commento che con questo sistema le miniature erano comunque visibili nelle pagine di archivio, in quelle cioè che si trovano se si clicca su un etichetta. Per non vederle neppure nelle pagine di archivio ma solo nei singoli post sostituite la riga di codice
<b:if cond='data:blog.url != data:blog.homepageUrl'>
con la riga
<b:if cond='data:blog.pageType == "item"'>
seguendo la stessa procedura illustrata nell’articolo. D’altra parte tutte le possibili scelte in quanto a mostrare o nascondere un elemento in Homepage, archivio e articolo erano già state illustrate.
Pubblicato il 05/07/08 - aggiornato il | 81 commenti :
Inserire gli articoli correlati in Blogger.
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
Sostituiscilo con quest'altro codice
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><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&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Devi inserire codice e titolo. Il codice da inserire è questo
removeRelatedDuplicates();
printRelatedLabels();
</script>
Come mostrato in questo sreenshot.Adesso occorre tornare in Design > Modifica Html e cercare questo codice
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
