Widget dei Post più Popolari presentati in uno slide orizzontale.

Post più popolari di Blogger presentati in uno slideshow delle miniature e con frecce di navigazione.

Vado a ripresentare il widget orizzontale dei post più popolari mostrati tramite miniature con effetto slide che la prima volta ha avuto una accoglienza piuttosto tiepida da parte dei lettori. Questo è strano perché in genere gli slideshow orizzontali sono sempre molto graditi. Ho pensato che la ragione fosse la mancanza della Demo che è particolarmente utile per vedere il widget all'opera e per farsi una idea delle sue caratteristiche.

Il gadget si basa sullo script Step Carousel di Dynamic Drive e potrà essere visualizzato subito sopra all'area dei post mostrando ai lettori il meglio delle vostre pubblicazioni o comunque quelle più lette. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca il codice </head> e, subito sopra si incolla quest'altro blocco di codice

<style type='text/css'>
#gallery{position:relative;margin:0 35px 20px;width:518px;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/AVvXsEgEHTHBVE0RRC17FdGoa6sO3d9dXVSqR96a2mnt48Zjx8IUsBgYwDA_3-uJoc56sY0EXy5z6oNdqst8m0fEsatPsA1ModTZaqdZpoKoHg-wcRn8TELJz87aIwv51NWRkzrJ-et_0fhjTAtQ/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=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js' type='text/javascript'/><script src='https://sites.google.com/site/scriptperilblog/javascript-2/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/AVvXsEg-DHi8WgbMKibZpnRLaXNCootsY9oRuNM0Z2v5Iy5gQCw7yJhFGSWXVSUjTtQ4KjynY2jCxvyza_IE1Q94KwQYpg8g2cbTaM7WmiKqbQftHDatM5GTT10ms6vzQDcqTkqubpbDh4ez7da1/s48/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEWUc0gRbyc5BdeIIC7pS4vINL8WtI5llsscKpp6l30elRLjUrV_PVEKSGl_rSZaZ89i714Vda7BUOHlQk8meqFc8CXhm7skSk8XZVfs2ispMzvPGra3hMF14tJCymGIkfUWVGWi5WYvve/s48/next.png", 15, 36]},
contenttype: ["external"]
})
//]]>
</script>

Si cerca adesso la riga

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

e immediatamente sotto si incolla quest'altro codice

<b:widget id='PopularPosts99' 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/AVvXsEiqb1UVDr_8sVsAutFzWYGVeymfo04f2RPIYUxOR7HZfiE6vRO8XC-xqQBI2Kty16UFIjlYAhdeDRKoZQT8cM5vqbxCKALglnE_OIDNiXSnzLuglrmtY01DyEsDOdzX5RJkTDs-2TNpWqQ/s48/no-image.jpg'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div>
</b:if></b:includable>
            </b:widget>

Si salva il modello e si visualizza il risultato. Ecco la Demo online

Può essere modificata la larghezza (518 in questa versione) ricordandosi di aumentare un numero di pixel in modo da mostrare interamente una o due miniature in più. La immagini dello sfondo, quella delle due frecce di navigazione oltre alla immagine che sarà vista di default quando non ce ne siano nel post, possono essere sostituite da altre di vostro gradimento. Si può modificare l'opacità (50 e 0.5) che appare come effetto hover quando le miniature sono puntate dal cursore.

Chi ha già JQuery nel template può fare a meno di incollare la riga evidenziata di giallo mentre chi possiede un blog su un dominio personalizzato dovrà scaricare il javascript colorato di viola e caricarlo su un hosting quale Dropbox o su uno spazio proprio. Questo widget sarà visibile solo in homepage. Nel caso in cui vogliate mostrarlo ovunque eliminate la riga evidenziata di verde e quella evidenziata di grigio.  Se invece voleste mostrare il gadget per esempio solo in una pagina statica non vi resta che modificare solo il tag condizionale evidenziato di verde.  Concludo osservando che il numero 99 con cui è stato denotato l'ID del widget non ha nessun significato e può essere sostituito da un altro.