21 agosto 2011

Le immagini dei post più popolari mostrate in un cubo animato.

Il widget dei Post più popolari di Blogger non è il massimo dell'estetica ma quest'ultima può essere migliorata e resa assolutamente originale mediante una modifica abbastanza semplice. Per prima cosa dobbiamo inserire il widget degli articoli più visti che è uno di quelli ufficiali di Blogger, questo ovviamente nel caso non lo avessimo già fatto.

Si va su Design > Aggiungi un gadget > Post più popolari e si posiziona in una sidebar dopo averlo configurato

 post-più-popolari-configurazione 

L'importante è lasciare la flag a miniatura immagine e scegliere un numero di post maggiore o uguale a 6, in modo che vengano acquisite le foto presenti nei post. Adesso andate su Design > Aggiungi un gadget > HTML/Javascript e incollate il codice seguente in Sezioni del sito

<style type="text/css">
.cube { width: 240px; height: 240px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/widget-1/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="https://sites.google.com/site/scriptperilblog/widget-1/popularcube.js"></script>

Cliccate su Salva e posizionate l'elemento subito al di sopra di quello dei Post più popolari. Possono essere variate le dimensioni del cubo (240 pixel quelle che sono state proposte) in funzione di quelle della sidebar in cui andrà a inserirsi

posizione-script-post-più-popolari

Se adesso aprite il browser, vedrete un cubo formato dalle immagini presenti negli articoli più popolari che mostrerà le varie facce con movimenti casuali

popularcube-effect

 

Osservazioni conclusive: Il widget della demo è correttamente visibile anche con Internet Explorer 9 mentre, se userete il codice proposto, non sarà così e si visualizzerà al meglio solo con Firefox e Chrome. Per ovviare all'inconveniente, scaricate i due file javascript colorati di rosso, che sono stati hostati su Google Sites e caricateli invece su DropBox nella cartella Public. Quindi copiatene il link diretto e sostituitelo nel codice precedente. Non ho potuto inserire il link dei file javascript su DropBox per questioni di limitazioni di banda.  

Fonti | JQuery Image Cube e Abu Farhan




12 commenti:

  1. davvero bello! ;) ti dirò che non mi dispiace nemmeno il widget originale, peccato non si possa usare in orizzontale, sul modello di linkwithin, per intenderci.... o si?

    RispondiElimina
  2. Non so cosa ha il mio browser? o cosa, ma non funziona

    RispondiElimina
  3. Io uso Firefox ma il cubo funziona solo in fondo alla pagina mentre nel layout i post più letti compaiono in sequenza verticale, uno dopo l'altro.Come mai? Grazie di tutti i preziosi consigl. Serena settimana!

    RispondiElimina
  4. @Erika
    Essendo uno script della libreria JQuery ci può essere incompatibilità con un altro che è già presente nel tuo modello. L'incompatibilità si può presentare in uno o più browser.

    RispondiElimina
  5. e te pareva !!! comunque complimenti per la tua bravura e pazienza

    RispondiElimina
  6. Carino ma troppo ingombrante. :)

    Ciao Parsi.

    LeNny.

    RispondiElimina
  7. Waaa bellissimo effetto! :)))
    Grazieeee :D

    RispondiElimina
  8. wow bello! sempre grazie per le tue idee!!!!
    sono ancora in tempo per augurarti un fantastico 2012!!

    RispondiElimina
  9. @anna
    Gli auguri sono sempre ben accetti :D

    RispondiElimina
  10. wow, ma che bella cosa che ci hai insegnato!!! Grazie!!
    ciao

    RispondiElimina

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