Slideshow dei Post più popolari per Blogger.

Vediamo come sia possibile personalizzare il widget dei Post più popolari che è presente nella lista dei gadget ufficiali di Blogger. L'obiettivo è quello di mostrare appunto questi articoli più letti inseriti in uno slideshow in cui sia visibile la miniatura di ciascun post e gli strumenti di navigazione per visionarli senza bisogno di aprirli.

Ho postato in rete una

• Demo dello slideshow dei Post più popolari di Blogger -

e una particolarità del widget è anche quella di ingrandire la miniatura del post che si trova in quel momento nella posizione centrale. Vengono infatti mostrati tre post per volta ma se ne possono scegliere fino a un massimo di dieci

La prima cosa da fare è quella di inserire il widget dei Post più popolari nel blog, se non lo si è già fatto. Si va quindi su Layout > Aggiungi un gadget e si seleziona detto widget 

Si configura il widget scegliendo il numero di post da mostrare (fino a 10) e di visualizzare la miniatura dell'immagine e lo snippet (incipit del post). Si può anche selezionare il periodo preso in esame dalle Statistiche per estrarre questi post. Le opzioni sono: Ultimi 7 giorni, Ultimi 30 giorni e Sempre.

Tale widget deve essere posizionato nella area principale del blog vale a dire subito sopra la zona del post e non in una sidebar. Nella sidebar dovrà invece essere inserito un altro widget con i CSS dello slideshow in questo modo

Dobbiamo quindi tornare su Layout > Aggiungi un gadget > HTML/Javascript e incollare questo CSS e javascript

<style>
* {
    margin: 0;
    padding: 0;
}
body {
    font: 11px Helvetica, Arial, sans-serif;
}
#wrapper {
    width: 800px;
    margin: 60px auto;
}
#intro {
    padding-bottom: 10px;
}
#slider {
    width: 800px;
    margin: 0 auto;
    position: relative;
    border: 10px solid #ccc;
}
.scroll {
    overflow: hidden;
    width: 800px;
    margin: 0 auto;
    position: relative;
}
.scrollContainer {
    position: relative;
}
.scrollContainer div.panel {
    padding: 10px;
    width: 274px;
    height: 318px;
}
#left-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/leftshadow.png) repeat-y;
}
#right-shadow {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    bottom: 0;
    background: url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/rightshadow.png) repeat-y;
}
.inside {
    padding: 10px;
    border: 1px solid #999;
}
.inside img {
    display: block;
    border: 1px solid #666;
    margin: 0 0 10px 0;
    width: 250px;
}
.inside h2 {
    font-weight: normal;
    color: #111;
    font-size: 16px;
    margin: 0 0 8px 0;
}
.inside p {
    font-size: 11px;
    color: #ccc;
}
a {
    color: #999;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
}
a:hover {
    border-bottom: 1px solid #999;
}
.scrollButtons {
    position: absolute;
    top: 127px;
    cursor: pointer;
}
.scrollButtons.left {
    left: -45px;
}
.scrollButtons.right {
    right: -45px;
}
.hide {
    display: none;
}
</style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://accordion-template.googlecode.com/svn/trunk/slidermovingbox.js" type="text/javascript" charset="utf-8"></script>

in cui si può scegliere la larghezza dello slideshow. E' anche possibile selezionare due immagini diverse per l'ombra delle due frecce modificando gli URL colorati di rosso. Se nel vostro modello avete già la Libreria JQuery, non occorre inserire la riga colorata di blu.

Per quello che riguarda le frecce di navigazione la vedo invece più difficile visto che il javascript il cui URL è colorato di viola usa un linguaggio di programmazione che personalmente non conosco.

Questo widget si deve alla capacità e intelligenza di Abu Farhan e del suo team.