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 -