Pubblicato il 26/05/12e aggiornato il

Widget dei Post più Popolari di Blogger con effetto multicolore.

Come installare il widget degli articoli più popolari di Blogger con i titoli visualizzati in dei box multicolori.
Il gadget dei Post più popolari di Blogger è un widget ufficiale e può essere installato semplicemente andando su Layout > Aggiungi un gadget > Post più popolari. Vengono visualizzati i titoli degli articoli che hanno ricevuto più visite con miniature e snippet ma lo stile è quello dell'elenco ereditato dal blog.

Ho già presentato una personalizzazione del widget dei Post più Popolari che li inserisce in uno slideshow verticale. Partendo da un plugin di Wordpress che ha avuto un certo successo, c'è chi ha pensato di mostrare l'elenco degli articoli più visti del blog con un effetto multicolore che li inserisce in una sorta di istogramma rovesciato se mi si passa l'espressione.

Ciascun titolo è inserito all'interno di un rettangolo di colore diverso e di larghezza a scalare

post-più-popolari-multicolori

Sulla sinistra del titolo è visibile la miniatura della prima immagine presente nel post o quella di default se nell'articolo non ve ne fosse nessuna.

demo-widget

Prima di procedere con la installazione bisogna eliminare il widget dei post più popolari nel caso si fosse già installato. Si va su Modello > Backup/Ripristino e si salva il modello completo per una copia di sicurezza. Si torna su Modello > Modifica HTML > Procedi e si mette la flag su espandi modelli widget. Pigiando su F3 o su Ctrl+F, si cerca

/* Variable definitions
   ====================

quindi si incolla subito sotto questo codice

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff6e74"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff906e"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffe46e"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#d2f57e"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#54d2f8"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#9ae9d3"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f8aa5d"/>
</Group>

I sette codici dei colori in rosso fissano il colore di ciascuno dei sette rettangoli orizzontali e possono essere personalizzati in un secondo momento. Con la stessa tecnica si cerca la consueta riga

  ]]></b:skin>

e, subito, sopra, si incolla quest'altro codice

/*Post Popolari*/
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#Probloggingtools{}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

dove si possono personalizzare le larghezze in percentuale dei sette rettangoli oltre ad altri parametri. Se si ha un template di Blogger del Designer Modelli dobbiamo adesso cercare questa riga

<b:section-contents id='sidebar-right-1'>

nel caso volessimo inserire il widget nella sidebar di destra. Se si ha invece un vecchio modello è invece opportuno cercare una riga di codice simile a questa

<b:section class='sidebar' id='sidebar'>

Se non ci sono le righe esattamente identiche a queste si può sempre cercare dove inizia la sezione della sidebar in cui vogliamo installare il widget. Subito sotto si incolla quest'ultimo codice

<b:widget id='PopularPosts1' locked='false' title='Post Popolari' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://lh5.googleusercontent.com/-RJnK-ibWr5w/T8DC98QhdHI/AAAAAAAAYWs/9lx-qdt0hxI/s48/noimages.png'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://lh5.googleusercontent.com/-RJnK-ibWr5w/T8DC98QhdHI/AAAAAAAAYWs/9lx-qdt0hxI/s48/noimages.png'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>
</b:widget>

dove può essere modificato il titolo del widget in blu e l'URL della immagine di default (48x48 pixel) in rosso. Si salva il modello. Si va adesso su Layout, si clicca su Modifica nell'elemento Post Popolari


post-più-popolari-blogger

e si configura il numero degli elementi uguale a sette.

post-più-popolari-blogger[4]

Si va su Salva e si posiziona a piacere il widget con il drag & drop del mouse. Si possono anche scegliere se mostrare gli articoli più visitati di sempre, degli ultimi 7 o degli ultimi 30 giorni.
Fonte | Latest Hack -




30 commenti :

  1. Uao, bellissssimo!
    Questo è uno di quei widgets che le donne amano tanto, colorato e grazioso ;)
    Certo che con "istogramma rovesciato" hai superato te stesso, ma da dove ti vengono? :D

    RispondiElimina
    Risposte
    1. @GiulianaMosetti
      Felice che ti sia piaciuto. Non ho trovato una definizione migliore di "istogramma rovesciato" :D

      Elimina
  2. Che bello!! Carinissimo, appena ho tempo cerco d'inserirlo.
    Grazie!!!
    Molto utile anche il link della fonte, ci sono molte cose carine e utili!! ;)
    saluti Ernesto e buona domenica :)

    RispondiElimina
  3. Risposte
    1. @Giorgiogal
      Sei sicuro? Perché con I8 funziona alla grande. Domani provo ad aprirlo anche con IE9. Sarebbe il colmo se funzionasse con IE8 e non con IE9 :)

      Elimina
    2. @Giorgiogal
      Con IE9 non si vedono i numeri ma i box colorati vengono bene.

      Elimina
    3. sì i box si vedono. i numeri no.

      Elimina
    4. Attualmente sto usando questo widget. C'è un modo per escludere dei post particolari in modo che non appaiono nella classifica?
      Oppure per escludere i post che non hanno immagini?

      Elimina
    5. @AndreaSapuppo
      E' un problema che mi sono posto anch'io. Infatti è un gadget che non ho mai messo per questa ragione. Non mi risulta che nessun blogger a livello mondiale abbia risolto questo quesito.

      Elimina
  4. Ernesto, sai se con questo widget è possibile in qualche modo visualizzare anche i sommari degli articoli oltre che i titoli? Perchè mettendo il flag sull'opzione "snippet" non compaiono.

    RispondiElimina
    Risposte
    1. Sì è un problema che è noto e che non è ancora stato risolto da nessuno (almeno credo) @

      Elimina
  5. Ciao, ho creato questo widget molto carino, però con un solo colore(in seguito deciderò se cambiarlo), ma avrei un paio di domande
    1)ho impostato 10 post e me ne da 6
    2)vorrei che le immagini fossero quelle del post mentre (ovviamente) mi appaiono quelle del titolo che sono sempre immagini, esiste un modo per invertirle?
    Grazie
    (scusa, avevo lasciato i link e ho letto dopo che non si può, o sbaglio?)

    RispondiElimina
    Risposte
    1. @lemedichesse
      Il widget arriva fino a 7 post. L'ultimo ha una larghezza di 60% del primo. Se sei brava seguendo la stessa sintassi puoi aggiungere altri post. L'immagine che viene mostrata come miniatura è la prima presente nell'articolo.
      Si possono incollare gli URL nei commenti ma non si possono lasciare link attivi cioè inserire un HTML del tipo < a href="URL LINK"....

      Elimina
  6. Ciao, volevo chiederti qualcosa che ti sembrerà banale. Se io uso il widget dei post più popolari non si vede la miniatura di nessuna immagine, anche se nel post ce ne sono? Sbaglio nell'impaginare il post? cosa posso fare?

    RispondiElimina
    Risposte
    1. Ci possono essere varie cause
      1) Inserisci tutte le immagini dopo l'Intervallo del Continua a leggere
      2) Carichi le immagini in un hosting esterno tipo Flickr
      3)Ci potrebbe essere nel tuo modello una qualche incompatibilità con le immagini di questo widget
      @#

      Elimina
    2. Cosa fosse l'intervallo del continua l'ho scoperto solo oggi, prima non l'avevo messo e l'ho piazzato dopo l'immagine di presentazione della ricetta (ho un foodblog). Le immagini le carico tutte su altervista e uso i link diretti. Non capisco =(

      Elimina
  7. Prova a caricare le immagini su Picasa. Altervista non c'entra nulla con Blogger
    @#

    RispondiElimina
    Risposte
    1. Grazie mille, ora le visualizzo! Però non le visualizzo per intero ahahah ho provato a modificare le dimensioni cambiandole dal codice html del widget riesco ad ingrandirla quanto mi pare ma non prende mai l'immagine per intera, solo la parte centrale in larghezza, l'altezza non è un problema. Se non mi spiego granchè puoi guardare la pagina del blog, non so se è il caso di mettere il link qui, non voglio fare spam

      Elimina
    2. Le miniature sono quadrate. Se le immagini nei post sono rettangolari è evidente che ne verrà mostrata solo una parte
      @#

      Elimina
  8. Salve, grazie come sempre per il suo lavoro. Nel gadget post più popolari sul mio blog, nonostante abbia messo la spunta, non appaiono le foto dei post più popolari. Appaiono solo per post le cui foto sono state inserite direttamente, mentre nei post le cui foto sono hostate altrove, le foto non appaiono nel gadget post più popolari. Non so se mi sono spiegata bene....più scrivo e più mi incarto. Come si può risolvere questo problema e far apparire tutte le foto? Grazie in anticipo per tutto. Saluti Martha

    RispondiElimina
  9. Scusi, ho letto sopra che questo argomento è già stato affrontato. Grazie. Martha

    RispondiElimina
  10. salve Ernesto, ha una guida sul widget post popolari che sia visibile nella versione mobile di blogger? Grazie Buonasera.

    RispondiElimina
    Risposte
    1. Prova a trascinare il widget sotto l'area del post e a mettere mobile='yes' nel modello nella prima riga del widget
      @#

      Elimina
  11. Grazie gentile Ernesto, io ho attivo il widget originale di blogger e lo ho alla sinistra del sito.Cosa dovrei modificare nel template perchè lo veda anche nel mobile?Come lei sa il widget originale non è editabile dal layout. Il sito è questo : http://www.risparmioebenessere.it/

    Grazie mille

    RispondiElimina
    Risposte
    1. Se sta alla sinistra non andrà mai nel mobile perché la sidebar non si vede. Devi procedere così:
      1) Creare un nuovo widget dei Post più popolari
      2) Su Layout devi trascinarlo sotto l'elemento Post sul blog
      3) Vai in alto su Salva disposizone
      4) Vai su Modello > Modifica HTML e cerchi con Ctrl+F PopularPosts1 o PopularPosts2. Devi trovare quello visibile sotto il post e non nella sidebar
      5) Trovato il codice devi applicare i tag condizionali per mostrare quello sotto il post solo nella versione mobile. Non è semplicissimo. Leggi la parte finale di questo post
      http://www.ideepercomputeredinternet.com/2015/04/blogger-blog-mobile-friendly-code.html
      @#

      Elimina
  12. Grazie Ernesto,ho cominciato a creare il widgert e metterlo sotto il post e se vi sono commenti finirebbe troppo in fondo pagina.Vorrei creare un elenco di link con post piu' popolari che si veda sia nel mobile che nel desktop da poszionare nel template sotto il banner di fine pagina.Ha scritto qualcosa in merito??Grazie ancora e complimenti per la consulenza che fa.Ormai è un punto di riferimento.
    Una pagina di esempio è questa :
    http://www.risparmioebenessere.it/2015/10/colon-irritabile-rimedi-naturali-per-risparmiare-la-salute.html

    RispondiElimina
    Risposte
    1. Non è semplice mostrare un widget di quelli ufficiali subito sotto il post. Se ci fosse il codice non ci sarebbero problemi
      @#

      Elimina
  13. capisco.E per mettere un altro widget semplicissimo con un elenco dei post piu' popolari anche senza miniature in modo che compaia sotto il banner di fine pagina? Ha qualche codice in merito.? Grazie

    RispondiElimina
  14. Ho tolto il gadget originale, seguito le istruzioni, ma ricevo il messaggio d'errore "More than one widget was found with id: PopularPosts1. Widget IDs should be unique". Il nome ricorre solo nel codice copiato e incollato da qui.
    Inoltre: è possibile scegliere quale immagine viene selezionata come anteprima, tra quelle del post? E "forzare" la dimensione (ultimamente vengono riprodotte a grandezza naturale...). Grazie!

    RispondiElimina
    Risposte
    1. Il messaggio dice che stai usando più di un widget. Prova a sostituire tutte le occorrenze di PopularPosts1 con PopularPosts2 ma è un lavoraccio :(
      Viene scelta sempre la miniatura della prima immagine del post.
      @#

      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.