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

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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfIg7Mwv-dW69RGWwF8KrqfxAEBw0xgzbw8ISv8SmGqkzJBUG2ZhaYJZYirAPylVcWb97j_hQrp6zqOpv59fvAIhYngzf1MTLwBpEeGIZtBHBIl0C0dYF4jHDOaLlRzW8TEfUhOs7_bY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfIg7Mwv-dW69RGWwF8KrqfxAEBw0xgzbw8ISv8SmGqkzJBUG2ZhaYJZYirAPylVcWb97j_hQrp6zqOpv59fvAIhYngzf1MTLwBpEeGIZtBHBIl0C0dYF4jHDOaLlRzW8TEfUhOs7_bY/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




e si configura il numero degli elementi uguale a sette.



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 -