Widget degli articoli con più commenti per Blogger con diversi stili di elenchi.

Widget degli articoli più commentati di Blogger inseriti in un elenco con il numero dei commenti ricevuti.

In un precedente post ho già presentato un gadget inerente ai post più commentati ma non mi aveva pienamente soddisfatto in quanto a estetica e possibilità di personalizzazioni. Si basava su Yahoo Pipes e prendeva in considerazione gli ultimi 5000 commenti a prescindere dai post che li avevano ricevuti.
Con questo nuovo gadget si cambia approccio e i post rilevati saranno gli ultimi 1000 che sono stati pubblicati.
Lo perdita sarà quella di non considerare i vecchi post, se ne abbiamo pubblicati più di mille, ma ci sarà l'innegabile vantaggio di poter visualizzare il numero di commenti che hanno effettivamente ricevuto.

Per l'installazione si va su Design > Aggiungi un gadget > HTML/Javascript e si incolla il seguente codice

<!-- Post più popolari Inizio -->
<script type="text/javascript">
function getYpipePP(feed) {
document.write('<ol style=" ">');
var i;
for (i = 0; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title;
var pComment = " \(" + feed.value.items[i].commentcount + "\)";
var pList = "<li>" + "<a href="+ href + '" target="_blank">' + pTitle;
document.write(pList);
document.write(pComment); //eliminare per togliere il contatore dei commenti
document.write('</a></li>');
}
document.write('</ol>');
document.write('<div style="font-size:70%;text-align:center"><a href="http://goo.gl/xftnK">Install widget</a></div>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://www.ideepercomputeredinternet.com
&ShowHowMany=8
&_id=26088013e952970bb43987813f0433de
&_callback=getYpipePP
&_render=json"
type="text/javascript"></script>
<!-- Post più popolari Fine - www.ideepercomputeredinternet.com  -->

Si clicca su Salva dopo aver digitato anche il titolo. Le personalizzazioni da fare sono abbastanza interessanti:

1. Si deve inserire in YourBlogUrl l'indirizzo della homepage del blog senza la slash (/) finale
2. Al posto di ol possiamo mettere ul in entrambe le occorrenze, se si vogliono degli elenchi non numerati 
3. In ShowHowMany dobbiamo inserire il numero dei post con più commenti che vogliamo mostrare
4. La linea document.write(pComment); può essere tolta se non si vuol vedere il numero dei commenti accanto a ciascun titolo
5. La presenza del target="_blank" fa in modo che l'articolo si apra in un'altra scheda

La lunga stringa alfanumerica si riferisce all'ID del PIpe di Yahoo. Si può accedere a quella creata da me relativa al Widget degli articoli più commentati. Loggatevi con il vostro account Yahoo o createlo sul momento. Vedrete il pulsante Clone, cliccateci per copiare il Pipe. Nei due campi presenti inserite il numero di post che volete visualizzare nel widget e l'URL della vostra homepage senza slash (/) finale. Andate su Run Pipe per controllarne il funzionamento. Dovreste vedere l'elenco dei post più commentati del vostro blog

Non vi resta che copiare l'ID del Pipe, evidenziato di giallo nelle screenshot, che sarà comunque visibile anche nella barra del browser. Dovrà essere sostituito a quello evidenziato di rosso nel codice appena postato.

Stili degli elenchi

Nel javascript da inserire nell'elemento pagina non è stato inserito alcuno stile per l'elenco: document.write('<ol style=" ">');. Si può però scegliere uno dei tanti attributi associabili al tag <ol> per rendere il widget più originale. Faccio un breve elenco:

1. disc: un cerchietto pieno
2. circle: un cerchietto vuoto
3. square: un quadratino
4. decimal: sistema decimale 1, 2, 3, ...
5. decimal-leading-zero: sistema decimale ma con due cifre: 01, 02, 03, ...
6. ower-roman: cifre romane in minuscolo. i, ii, iii, iv, ...
7. upper-roman: cifre romane in maiuscolo. I, II, III, IV, ...
8. lower-alpha: lettere minuscole. a, b, c, ...
9. upper-alpha: lettere maiuscole. A, B, C, ...
10. lower-greek: lettere greche

Per esempio se all'interno delle virgolette di style inseriamo questo codice:

 style="list-style:square inside;"

otteniamo per l'elenco dei post più commentati questo aspetto

                     

con dei quadratini al posto dei numeri. Il secondo esempio si riferisce invece all'uso di lettere greche con questo codice

document.write('<ol style="list-style:lower-greek;">');

Si può anche inserire una immagine, anche animata, alla sinistra di ciascun post dell'elenco. Il codice da utilizzare in questo caso è

list-style-image: url(URL IMMAGINE);

dove al posto di URL IMMAGINE dovrà essere inserito l'indirizzo preso da Picasa, SkyDrive o DropBox dopo che vi è stata caricata. Di default il marcatore sarà all'esterno dell'elenco. Per metterlo all'interno bisogna aggiungere l'attributo inside. Es: list-style: circle inside;. Con outside si vuole invece che il marcatore sia visibile all'esterno. Il primo screenshot si riferisce a uno stile con inside e il secondo con outside. In verità, nel secondo caso, non è stato messo questo attributo che funziona di default se non è presente.

Ho postato in rete un esempio di widget con questa immagine    come marcatore

• Demo del widget dei post più commentati - 

In cui la riga dello stile dell'elenco è la seguente:

document.write('<ol style="list-style-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9UHrSV5YUbUCnK7bgLwwOMdDlINGe-rF9dhph6NBlZ81jKlXrxH7MPQD99TCsFni0TUpUZxfGeIYnjd0KlTTga3MOTLUxA_Firytzw13QgKZMuH8kfMd-X6M7qkC2nYIRNsE7WPbjdV0/);">');


Aggiornamento: Se volete inserire anche la scritta commenti insieme al loro numero leggete il commento numero 10.a