Pubblicato il 20/02/12e aggiornato il

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

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

slideshow-post-più-popolari

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 

post-più-popolari-screenshot

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

slideshow-post-popolari

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.





26 commenti :

  1. Domanda Off Topic: prima di tutto complimenti per la nuova grafica del sito, ma cosa significa IpCel, la sigla vicina al titolo del sito?

    RispondiElimina
  2. @Francesco
    Sono consapevole di aver fatto un lavoro grafico pessimo ma ti ringrazio comunque per la bugia bianca. D'altra parte ho sempre ammesso di essere una frana in tal senso. Il fatto stesso che tu non abbia individuato il logo ne è un esempio lampante, sono solo le iniziali di Idee per Computer ed Internet, forse avrei dovuto usare un altro font. Ho fatto tutto di notte e quando ne avrò tempo e voglio migliorerò qualcosa (poco temo ...)

    RispondiElimina
  3. Uffa!!!
    Non funge, che peccato...

    RispondiElimina
    Risposte
    1. @altranews
      Forse dipende dal tuo modello che ha una incompatibilità con il JQuery perché come puoi vedere dalla demo il codice è OK. Funziona anche con IE, il che è tutto dire :D

      Elimina
    2. Sono convintissimo che è come dici tu, non potrebbe essere diversamente :)
      però, ne approfitto per chiederti: non esiste qualcosa del genere per il mio modello? es: http://rt.com/ -sarebbe fantastico-
      Grazie mille

      Elimina
  4. p.s.
    dimenticavo: ti seguo da una vita, anche se commento poco. Bravo davvero!

    RispondiElimina
  5. @altranews
    Non si può mai dire a priori, bisogna provare a installare un widget per vedere se funziona, non ci sono alternative

    RispondiElimina
  6. Bello il nuovo vestito. :)

    Ciao Parsi. :D

    RispondiElimina
  7. quando ho aperto la pagina ho detto ma ho sbagliato blog ma poi ho subito riconosciuto il tuo modo semplice di scrivere e spiegare le cose, complimenti e buon proseguimento!

    RispondiElimina
  8. Bravo Ernesto. Bello il nuovo look!!!!!

    RispondiElimina
  9. chissà se è possibile fare lo slide utilizzando non il gadget degli articoli più popolari ma gli articoli più recenti?

    RispondiElimina
  10. @LeNny
    @Catrina
    @Stefano
    Grazie ma sono consapevole dei miei limiti in fatto di grafica ;)

    @michelelan
    Ci sono sul web dei widget simili che possono essere riadattati anche per gli Ultimi Post ma hanno dei problemi a essere visualizzati correttamente con IE, comunque seguimi nei prossimi giorni.

    RispondiElimina
  11. Ciao, ho un problema con i commenti annidati di Blogspot, da stamattina non funzionano più come dovrebbero. Il tasto rispondi non fa nulla. Premettendo che da ieri (che andavano non ho toccato il template), cosa può essere successo? I tuoi vedo che funzionano (e che sono anche personalizzati).
    Potresti darmi qualche dritta?
    Grazie mille in anticipo ^^

    http://prevalentementeanime.blogspot.com/

    RispondiElimina
    Risposte
    1. @Acalia
      Ti posso confermare che il Team di Blogger ci sta lavorando sopra per eliminare il bug della data con il fuso orario sfalsato e quindi potrebbe darsi che abbiano fatto delle modifiche che non sono state recepite bene dal tuo template. Per i commenti nidificati quello che mi sento di consigliare è di aspettare fino a quando le bocce non si siano veramente fermate.

      Elimina
  12. @Ernesto
    Sicuramente frana non sei, perché creare un sito è sicuramente uno dei lavori più certosini e precisi che ci sono in circolazione; e poi, l'accostamento del rosso col verde è sicuramente piacevole all'occhio e molto originale. In confronto al mio sito (www.nintendogalaxyitalia.blogspot.com, con molte parti del template già preesistenti) questo è superbo!

    RispondiElimina
    Risposte
    1. @Francesco
      Molto gentile veramente :) L'accostamento dei colori è stato un po' a caso, l'arancio è quello di Google, il verde invece l'ho scelto invece acquisendolo da un template che aveva questo colore ...
      Adesso ho tolto LinkWithin perché continuava a mostrare solo tre immagini invece delle cinque che avevo configurato e ho messo un altro sistema di articoli simili. Comunque sono tuttora in un situazione di "work in progress"

      Elimina
  13. Salve e scusate se mi intrometto ma non so più dove andare a cercare, sono approdata qui digitando non so più cosa. Mi sembra un buon sito da "salvare" e consultare. Non sono più giovanissima ma mi piace scrivere sul mio blog. Da tempo non aggiornavo la barra laterale così stamattina mi sono messa all'opera. Non sono stata in grado di inserire immagini da link esterni nè testo HTLM (tasto destro "incolla" non risponde). Non riesco a capire cosa possa essere successo. Grazie per i suggerimenti.

    RispondiElimina
    Risposte
    1. @stria
      Le informazioni che hai dato non sono sufficienti per fare una diagnosi. Se non ti funziona il tasto Incolla potrebbe essere un problema del browser, prova a usarne un altro. Potresti anche come alternativa usare la combinazione di tasti Ctrl+V che permette di incollare quello che è stato precedentemente copiato negli Appunti (scorciatoia Ctrl+C) nel caso tu abbia un sistema operativo Windows.

      Elimina
  14. GRAZIE! Con Ctrl+V ci sono riuscita. Non so proprio come ringraziarti. Non ho ancora capito perchè non funziona come prima ma...è già un successo così. Ti ringrazio per la tempestività. Anche il blog ringrazia. Ciao, Daniela.

    RispondiElimina
  15. Come faccio a visualizzare questo widget solo in homepage?grazie

    RispondiElimina
  16. @LuigiGriffo
    Sono al cellulare. Non posso postare codici. Fai una ricerca personalizzata con il modulo in alto a destra e inserisci "tag condizionali". Dovresti arrivare nella pagina giustamente

    RispondiElimina
  17. Scusa, forse non è il posto giusto, ma dovrei mettere in homepage sotto ai post un widget dei "post più popolari" in orizzontale con miniatura e titolo. Esattamente come quello che tu hai sotto ai singoli post ma riferito ai "post correlati". Cioè una cosa molto semplice e senza slideshow, ma non ho trovato in nessun tuo tutorial il metodo. Mi sapresti dire se è possibile e in che modo posso farlo?

    RispondiElimina
    Risposte
    1. Non mi ricordo di aver mai presentato un widget dei post più popolari in orizzontale senza slideshow. Magari in futuro lo potrei fare. Inserirlo sotto ai post è un'altra difficoltà ma potrebbe essere superabile.
      Stay tuned (senza impegno)
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.