Pubblicato il 08/06/13 - aggiornato il  | 4 commenti :

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://lh4.googleusercontent.com/-IHJuDBuOMIQ/UbLymcEc23I/AAAAAAAAiEM/q4ZgSETz-mU/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.


4 commenti :

  1. Interessante. :)

    Sarebbe utile poter apportare delle modifiche per visualizzare gli ultimi post e non i più popolari, così da poterlo sostuire a quello che da tempo non viene più visualizzato in nessun browser se non in FireFox (ne parlavamo qualche giorno fa, ricordi?).

    Ciao. :)

    RispondiElimina
    Risposte
    1. @# Se trovo qualcosa di simile per gli ultimi post lo pubblico :)

      Elimina
  2. Ciao Ernesto! Il secondo blocco di codice il mio template non lo trova.. c'è nè uno alternativo? Grazie.
    Lisa

    RispondiElimina
    Risposte
    1. Vai su Layout e guarda come si chiama la sezione dove sono inseriti i post.
      http://i.imgur.com/1Hkc1cB.png
      Invece che main può darsi che si chiami in un altro modo. Cerca il codice della sezione con quell'ID
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy