Pubblicato il 07/11/12e aggiornato il

Widget dei Post più Popolari con miniature ruotanti.

Come installare il widget dei Post più Popolari con miniature ruotanti al passaggio del cursore.
Il widget dei Post più Popolari è uno di quelli ufficiali di Blogger e che può essere installato andando su Layout > Aggiungi un gadget > Post più popolari. Nella finestra di configurazione possiamo scegliere se le considerare le statistiche degli ultimi 7 giorni, degli ultimi 30 giorni o quelle di sempre.

Oltre al Titolo del gadget si può anche scegliere se mostrare la miniatura della prima immagine del post, se mostrare lo snippet o incipit e il numero di articoli da visualizzare. Nel caso avessimo scelto di mostrare le miniature possiamo inserire una personalizzazione molto carina che mostrerà una rotazione di quasi 360 gradi al passaggio del mouse e che è già stata introdotta nel widget dei post casuali con miniature che ruotano.




Per ottenere questo effetto è sufficiente inserire un CSS nel modello e aver già aggiunto il gadget dei Post più Popolari. Si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra a questa si incolla il seguente codice

/* Post Popolari con Miniature Ruotanti Inizio */
#PopularPosts1 { max-width: 300px:
}
#PopularPosts1 dd { float: left; border-bottom: none;  margin: 8px 8px 0 8px; background: none; display: block; padding: 0;
}
#PopularPosts1 img { -webkit-transition: all 0.5s ease;  -moz-transition: all 0.5s ease;  transition: all 0.5s ease;  padding: 4px;    background: #eee;  background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);    -webkit-border-radius: 4px;    -moz-border-radius: 4px;    border-radius: 4px;    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);    box-shadow: 0 0 3px rgba(0,0,0,.7);
}
#PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-350deg);    -webkit-transform: scale(1.2) rotate(-350deg);  -o-transform: scale(1.2) rotate(-350deg);    -ms-transform: scale(1.2) rotate(-350deg);    transform: scale(1.2) rotate(-350deg);    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}
/* Post Popolari con Miniature Ruotanti Fine */

Si salva il modello. Oltre alla larghezza massima del widget possono anche essere personalizzati i colori (leggi post sui codici dei colori), la quantità di ombra all'esterno delle miniature e la durata della transizione (0.5 secondi è quella proposta). Questo effetto sarà visibile con Chrome, Firefox e Internet Explorer 10. Se avete inserito nel blog più di un widget dei post più popolari il secondo potrebbe avere l'ID PopularPosts2 invece di PopularPosts1 ma si tratta di una eventualità piuttosto remota. 
Fonte | Talat Rizwan -




12 commenti :

  1. ciao Ernesto, bel widget!
    una domanda,s e volessi inserire i bottoni di condivisione di facebook, twitter, etc. appena sopra o sotto il modulo dei commenti, dove devo inserire i codici nell'html? grz

    RispondiElimina
    Risposte
    1. @GaiaVincenzi
      Cerca questa riga
      div class='post-footer-line post-footer-line-3
      e prova a incollarlo subito sopra o subito sotto

      Elimina
    2. grazie mille sono riuscita =)
      ho da chiederti un altra cortesia, come posso modificare il font, la grandezza ed il colore della scritta "commenti) sotto ad ogni post (non il carattere dei singoli commenti)? è lo stesso delle etichette e dell'autore, che io però ho nascosto. grazie in anticipo

      Elimina
    3. @GaiaVincenzi
      Prova con questo
      http://www.ideepercomputeredinternet.com/2012/06/come-sostituire-posta-un-commento-con.html

      Elimina
  2. Ciao Ernesto!
    Molto carino questo widget, l'ho applicato nel mio blog.
    Grazie!

    RispondiElimina
  3. Ciao Ernesto,
    io vorrei inserire un widget dei post più letti della settimana senza che compaia il titolo, ma solo la miniatura dell'immagine. Sai se esiste qualcosa del genere? Perché vorrei disporre le miniature in orizzontale, e con il titolo il risultato non mi piace.

    RispondiElimina
    Risposte
    1. @# Esiste il widget dei post più popolari con la opzione 1 settimana. In orizzontale non me lo ricordo se qualcuno ha pubblicato un post in merito ma mi posso informare meglio

      Elimina
    2. Però compare il titolo in automatico, mentre io vorrei solo l'icona. Ho trovato uno slideshow sul tuo blog, però mi rallenta troppo il caricamento.

      Elimina
    3. Prova questo
      http://www.bloggerspice.com/2013/03/awesome-horizontal-popular-posts-widget.html
      P.S. Non ho testato

      Elimina
    4. Il widget che suggerisci è molto carino, ma anche rimpicciolendo le miniature sembra avere qualche problemino di funzionamento sul mio blog. Alla fine sono tornata ai popular post con miniature rotanti ;)

      Elimina
  4. Ernesto, è questo posta al quale mi riferivo, nel mio blog non funziona. Copio/incollo (rigo 13) sopra la scritta di cui parli ma se faccio l'anteprima si vede il codice sopra il titolo del mio blog, in home page ma del widget nessuna ombra. Dove sbaglio, se sbaglio, secondo te? grazie mille buon week end

    RispondiElimina
  5. p.s. ho cercato il rigo anche tramite ctrl+F ma il risultato è zero. :-)

    RispondiElimina

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.