Pubblicato il 22/03/11e aggiornato il

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

yahoo pipes widget più commentati

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
          post più commentati quadratino            elenco con lettere greche
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  freccia azzurra animata  come marcatore
In cui la riga dello stile dell'elenco è la seguente:
document.write('<ol style="list-style-image: url(https://lh4.googleusercontent.com/_nT13UtBmmiU/TYhe3OVTPzI/AAAAAAAAShM/k61QTeQ6G7w/blu-right-arrow-15.gif);">');


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




18 commenti :

  1. Buon giorno.
    Mi aggancio al suo bel articolo per chiederle una cosa simile. Nel mio blog su Blogger in costruzione (su tema esterno a Blogger) vorrei creare una lista "square" per la lista categorie, ma poi sarà utile per eventuali altre. Devo intervenire anche sul codice HTML (e quale sarebbe il codice?) o solo a livello di codice CSS?
    Grazie.
    Joy

    RispondiElimina
  2. @Joy
    Puoi fare con i CSS. dovresti avere una classe simile a questa
    .sidebar .widget {...
    Potresti aggiungerne un'altra
    .sidebar .widget ul li {...
    in cui inserisci gli stili con la sintassi
    list-style:....
    Se il codice è diverso dovresti comunque trovarlo. Si può anche creare una classe specifica per le categorie per esempio
    ul.etichetta li {list-style-image: url(immagine.gif);}
    Quando vai a elencarle le inserisci con
    < ul class="etichetta" > < li > ....

    RispondiElimina
  3. Ciao Parsi o meglio Ernesto. :)
    Dov'è finito il nick? Heheheheh.

    Grazie mille, come sempre molto utile.

    Ciao. :)

    LeNny.

    RispondiElimina
  4. Sig. Ernesto,
    lei è stato precisissimo, ma la mia conoscenza di HTML non è kla, sua :), ho iniziato da poco per costruire il miop blog. Allora, di ciò che lei mi ha scritto, ho due blocchi nel codice HTML, questo:

    .sidebar .widget {
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    margin:1em 0;

    e quest'altro:

    .sidebar .widget-content {
    margin: 0 5px;
    padding:0 20px;

    Che devo fare? Cosa scrivere e come? :S. Considerando che in Blogger, da "Designer Modelli" si possono aggiungere direttamente le stringhe di codice. Grazie.
    Joy

    RispondiElimina
  5. @Joy Sono anche io un dilettante che tre anni fa neppure sapeva che cosa era l'HTML.
    Forse dovresti provare a inserire questa classe
    .widget ul, .widget ol {list-style:square;}
    sopra alla riga
    /b:skin
    che è la fine dei fogli di stile.

    RispondiElimina
  6. Ciao Parsi. :)

    È da ieri che questo script non funziona più. Dipende forse da Yahoo Pipes? Puoi controllare per cortesia?

    Grazie caro. :)

    LeNny.

    RispondiElimina
  7. @LeNny
    Sì ha smesso di funzionare. Yahoo Pipes sono passati a una nuova versione e alcuni Tubi non funzionano. Speriamo che risolvano. Era già successo anche con il widget dei top commentatori

    RispondiElimina
  8. @Parsi:

    C'è la possibilità di aggiornare lo script in base alla nuova versione o si deve trovare un'altra soluzione? Altri widget sono parecchio pesanti... Grazie. :)

    Ciao.

    RispondiElimina
  9. @LeNny
    Se si risolve o trovo qualcosa d'altro ci pubblicherò un post

    RispondiElimina
  10. Ciao Ernesto. Ho installato il widget e funziona perfettamente! Ho solo un piccolo problema: vorrei che nella parentesi oltre al numero uscisse anche la scritta "commenti" es. (77 commenti). E' una cosa possibile? Ciao e grazie

    RispondiElimina
    Risposte
    1. @Lacucinaimperfetta
      Sì ma bisogna modificare il javascript. Inserisci la riga

      var pComment = " \(" + feed.value.items[i].commentcount + " commenti" + "\)";

      al posto di

      var pComment = " \(" + feed.value.items[i].commentcount + "\)";

      Elimina
  11. Scusa!!!!!! è possibile utilizzare il grassetto per il titolo dei post in elenco?

    RispondiElimina
    Risposte
    1. @Lacucinaimperfetta
      Prima di risponderti mettiamoci d'accordo. Non è che poi vuoi anche il corsivo o chissà che cos'altro :D perché non ti rispondo più :).

      Allora per il grassetto del titolo del post al posto della riga

      document.write(pList);

      metti le tre righe

      document.write('<b>');
      document.write(pList);
      document.write('</b>');

      Se vuoi in grassetto anche il numero dei commenti il codice da modificare è allora questo

      document.write(pList);
      document.write(pComment); //eliminare per togliere il contatore dei commenti

      che diventa

      document.write('<b>');
      document.write(pList);
      document.write(pComment); //eliminare per togliere il contatore dei commenti
      document.write('</b>');

      Elimina
    2. Non ti preoccupare! ...prometto di non chiederti altro! Grazie ancora!!!

      Elimina
  12. Devo venire meno alla mia promessa! .....mi piacerebbe cambiare solo il colore del titolo del post rispetto a quello di default! E' possibile? Grazie in anticipo

    RispondiElimina
    Risposte
    1. @Lacucinaimperfettadigiuliana
      Mi hai dato lo spunto per un prossimo post. Prendo nota :), se ho 15 minuti di tempo lo posso fare anche domani

      Elimina
    2. Io intendo il colore del titolo del post del blog e non quello di questo widget, sia chiaro :)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.