Slideshow dei Post più Popolari per Blogger.

Come creare uno slideshow con i post più popolari di Blogger e mostrarlo subito sopra all'area degli articoli.

Il gadget dei Post più Popolari è un widget ufficiale di Blogger, che utilizza le Statistiche visibili anche nella apposita scheda, per mostrare i post del blog che abbiano ricevuto il maggior numero di visite. Tale gadget può anche essere personalizzato in funzione delle nostre esigenze. Ricordo di aver presentato un tutorial per modificare le dimensioni del gadget, un altro per modificare le dimensioni delle miniature e un altro ancora per mostrare i post più visti sotto forma di slideshow verticale. E' anche possibile mostrare i Post più popolari come barre orizzontali multicolore e con le miniature ruotanti utilizzando il CSS3.

In questo post vado a presentare gli articoli più visti in uno slideshow orizzontale che ne mostri le loro miniature con frecce di navigazione. Il posizionamento più opportuno per un widget di questo genere è la parte immediatamente sopra all'area del post. Se con il mouse si passa sopra a una miniatura viene visualizzato un tooltip che mostra il titolo del post collegato

 

Per la installazione di questo slideshow occorre JQuery e quindi bisogna avere un modello che sia compatibile con questa libreria javascript. Dopo aver salvato il template si va su Modello > Modifica HTML > Procedi e si cerca la riga </head>. Subito sopra si incolla il seguente codice

<!-- Post Popolari Slideshow Inizio-->
<style type='text/css'>
#gallery{position:relative;margin:0 35px 20px;width:530px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyHdsZwbsPSEfAWS7_8X2LtSUyIZBn9S4umxjYM9M9-ZiB2e23wu7vkcTuXab9kFueyfIzfm4z8wIHPY-lS350ne7bdLb5p14tIUtKFRPiDxBFLR0qFVoRvwIQCIxNBM2oS38apBEIsPU/s78/sfondo.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/widget-1/popular-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzjt6hg9YYm3mxkRxYi8WJycmTeL1FfG4JMGQXPksrGLkgTAWq6Z5D5RdFyVlLpCxJjck9Bt_toBg31VHLmTj-L_Q5M0zIbI8pJO25TN1MZwg2VBHsKOF2Asui9mDKMf3kqfss_8yty1M/s48/prec.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG7p5-ORAN2imnHTa2cGm7bBeFUv-vpaTMiH4RQrW2ilY0mySDtxUIu8ZWQzwMGQmY7Pnu9f-Ih38Rn_V-yb7jT5mdyamsK6XBXqaSNrJlqYpQX4qN7lLzdxpLPK3E1Tg9dCDvX_JGr9M/s48/succ.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
<!-- Post Popolari Slideshow Fine -->

Le personalizzazioni più importanti riguardano il javascript JQuery evidenziato di giallo che può essere tralasciato se fosse già presente nel modello. Si può anche scegliere la larghezza del widget (530 pixel), le dimensioni delle miniature (72 pixel) e lo stile del bordo. Le due frecce di navigazione hanno l'URL colorato di rosso e possono essere sostituite da altre più adatte al nostro layout. Adesso si cerca la riga che fissa l'inizio della parte principale del blog

<b:section class='main' id='main' showaddelement='no'>

e, subito sotto, si incolla questo nuovo codice

<b:widget id='PopularPosts19' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <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/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTZn6KM7QyL21_P2U9Kqjj84Pa2XT9V4SZDmMkldHNfWHxk9mj2mOKuuAaP2ukUt60_lIdxEIewKo_Wj7ZWfKsl8fYfH3YjNnXYJQubO98AcjedWrfff_spuOfx5LOdWAe65q3BGKOP96n/s48/default-image.png'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
</b:includable>
</b:widget>

dove si può personalizzare l'immagine che viene mostrata di default quando non ne fossero presenti nell'articolo. Finalmente si salva il modello. Il numero 19 non significa nulla ma è solo un espediente per evitare che nello stesso blog due widget dei Post più Popolari possano darsi fastidio. Se avete un blog in un dominio personalizzato dovete scaricare il javascript il cui URL è colorato di viola e caricarlo su Dropbox.

Fonte | Dynamic Drive -