Pubblicato il 28/09/12 - aggiornato il  | 25 commenti :

Gadget dei Post casuali con miniature che ruotano.

Gadget degli articoli casuali per Blogger con CSS3 e effetto rotazione.
Visto il successo che ha ottenuto il precedente widget sugli Articoli Casuali ruotanti e letti alcuni commenti che mi invitavano a togliere data e commenti per renderlo esteticamente più valido, ho pensato di postarne una nuova versione.
Con questo nuovo codice si vedranno soltanto le miniature e il titolo del post. In questo modo si dovrebbe risolvere anche il problema dei titoli troppo lunghi che non avevano abbastanza spazio nella precedente versione. Anche in questo caso ho postato la solita

Non serve modificare il template. Basta andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito il seguente codice
<style type="text/css"> #post_casuali img{float:left;margin-right:10px;margin-bottom:10px;width:55px;height:55px;padding:3px;-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);} #post_casuali 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);} </style><div id='post_casuali'>
<script type='text/javaScript'>
var IPCEI_numposts=6;var IPCEI_snippet_length=150;var IPCEI_comment='Commenti';var IPCEI_disable='Commenti Disabilitati';var IPCEI_current=[];var IPCEI_total_posts=0;var IPCEI_current=new Array(IPCEI_numposts);function totalposts(a){IPCEI_total_posts=a.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<IPCEI_numposts;i++){var a=false;var b=get_random();for(var j=0;j<IPCEI_current.length;j++){if(IPCEI_current[j]==b){a=true;break}};if(a){i--}else{IPCEI_current[i]=b}}};function get_random(){var a=1+Math.round(Math.random()*(IPCEI_total_posts-1));return a};
</script>
<script type="text/javascript">
function articoli_casuali(json){for(var i=0;i<IPCEI_numposts;i++){var entry=json.feed.entry[i];var IPCEI_posttitle=entry.title.$t;if('content'in entry){var IPCEI_get_snippet=entry.content.$t}else{if('summary'in entry){var IPCEI_get_snippet=entry.summary.$t}else{var IPCEI_get_snippet="";}};IPCEI_get_snippet=IPCEI_get_snippet.replace(/<[^>]*>/g,"");if(IPCEI_get_snippet.length<IPCEI_snippet_length){var IPCEI_snippet=IPCEI_get_snippet}else{IPCEI_get_snippet=IPCEI_get_snippet.substring(0,IPCEI_snippet_length);var space=IPCEI_get_snippet.lastIndexOf(" ");IPCEI_snippet=IPCEI_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var IPCEI_commentsNum=entry.thr$total.$t+' '+IPCEI_comment}else{IPCEI_commentsNum=IPCEI_disable};if(entry.link[j].rel=='alternate'){var IPCEI_posturl=entry.link[j].href;if('media$thumbnail'in entry){var IPCEI_thumb=entry.media$thumbnail.url}else{IPCEI_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1tydDUzB36LSavUJgaItJpBJnA3xcBsnfJLRAxIy5YhsSZVvwuJ3sQP246D2Rfjgorh_RKfWs8jfngkSe33q6ocoSUmlVxxXW3r4MvJxLOrwNdi52koSrWZyIZmP01lmbmRh6eHX5PRE/s48/immagine.png"}}};document.write('<p>');document.write('<img alt="'+IPCEI_posttitle+'" src="'+IPCEI_thumb+'"/>');document.write('<div><a href="'+IPCEI_posturl+'" rel="nofollow" title="'+IPCEI_snippet+'">'+IPCEI_posttitle+'</a></div>');document.write('<div style="clear:both"></div></p>')}};getvalue();for(var i=0;i<IPCEI_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+IPCEI_current[i]+'&max-results=1&callback=articoli_casuali\"><\/script>')};
</script>
</div>
I parametri che si possono modificare facilmente sono il numero dei post da visualizzare (sono proposti in numero di 6) e la immagine di default che viene mostrata come miniatura se non ce ne fossero nel post. Si tratta di una immagine di formato 48x48 pixel in formato PNG ma può essere scelto anche il formato JPG. L'aspetto del gadget sarà questo
articoli-casuali-miniature
Le miniature dei post si metteranno a ruotare se puntate con il cursore. Quando si passa con il mouse sopra al titolo dell'articolo si visualizzerà un tooltip con l'incipit del post
tooltip-gadget-articoli-casuali-con-rotazione
L'effetto rotazione sarà visibile con Firefox e Chrome ma non con Internet Explorer 9 o precedenti.


25 commenti :

  1. Sì, è molto bello come gadget. La cosa carina è che - passando col mouse sul titolo - escono le prime parole del post.

    Thanks a million :)

    RispondiElimina
  2. Ma com'è che non va piu il menu di Blogger??? non tiene piu i link

    RispondiElimina
  3. Non funziona, mi blocca tutto il blog che carica una prima parte e Chrome resta a caricare all'infinito senza permettermi di muovere il cursore, provato diverse volte...Peccato...

    RispondiElimina
    Risposte
    1. Rettifico, il problema si verifica se è impostato numero di post inferiore ai reali post nel blog, nel mio caso avevo lasciato 6, ma nel blog ce n'erano solo 2. Altro problema però "Non sempre vengono visualizzate le anteprime". Spesso appare quella di default anche se nel post ci sono immagini...

      Elimina
    2. Se si volessero gli ultimi 6 post pubblicati ???

      Elimina
    3. @FrancwescoPerrelli
      Il widget mostra già gli ultimi 6 post, si può modificare il numero. Se poi uno cambia la data di pubblicazione è un'altra storia. Le immagini sono mostrate solo se sono prima del Read More.

      Elimina
  4. Ciao Ernesto, avrei una domanda su questo widget. Nel mio blog l'ho modificato in modo che mi "peschi" i post solo da una determinata etichetta. Se volessi inserirlo due volte, in modo da mostrare post casuali da due diverse etichette, come dovrei comportarmi?

    Tks

    RispondiElimina
    Risposte
    1. @Bastet...
      Devi necessariamente mettere due widget. Si possono invece mostrare i post che abbiano due etichette in comune inserendo una virgola
      e modificando l'URL dei feed
      /feeds/posts/default?

      Elimina
    2. Ieri sera il secondo widget non funzionava, pur riferendosi a un'etichetta diversa.

      Sto riorganizzando le etichette del blog. Ho usato pure Yahoo Pipes per unire due feed, ma il risultato posso usarlo solo nel widget Feed e nell'utilissimo menu con tutti i post in ordine alfabetico che hai spiegato qualche tempo fa.

      Faccio ulteriori prove e poi ti faccio sapere. Anche questa storia della virgola è interessante...

      Tks

      Elimina
    3. Aggiornamento: funziona! funziona! Ieri sera dormivo in piedi, mi sa. Thanks a million. :)

      Elimina
    4. Ciao! Come si fa a mettere i post casuali per una sola etichetta e non per tutto il blog? :) grazie :)

      Elimina
    5. @MicheleRainone
      Basta sostituire nella quart'ultima riga
      /feeds/posts/default
      con
      /feeds/posts/default/-/nomeetichetta
      dove al posto di nome etichetta metti quella che ti interessa

      Elimina
  5. Grazie, molto carino... ma preferisco le cose più semplici.

    RispondiElimina
  6. Ciao Ernesto, l'ho eliminato dal blog, mi rallentava tutto, si bloccava. Inoltre le icone erano sparite, il gadget era vuoto...ho letto che c'è stata una modifica del server giusto? Potresti dirmi come fare per reinserirlo nuovamente con un codice aggiornato? Grazie :-)

    RispondiElimina
    Risposte
    1. @ Angy
      La demo funziona ancora adesso. Non ci dovrebbero essere problemi di server perché non ci sono file esterni da caricare. Non ti so invece dire nulla sui problemi che ti possa aver provocato. Sei sicura che sia stato questo widget?

      Elimina
    2. Si sono sicura che è stato questo a darmi problemi, ce l'ho da parecchio. sempre andato benissimo...poi da tre giorni circa, quando aprivo il blog, mi si bloccava il pc, e ho notato che il gadget contenente i codici di questo widget in home era praticamente invisibile, vuoto. Riprovo? Che dici? Riprovo ad inserire nuovamente il codice e vediamo cosa succede...se mi dici che non può dare problematiche non so cosa pensare...grazie, ti faccio sapere :-)

      Elimina
  7. Niente da fare :-( come lo reinserisco mi si blocca la pagina, e non visualizzo nulla nella home...mah! Ci rinuncio...a presto

    RispondiElimina
  8. Ciao Ernesto, è possibile togliere lo snippet che compare al passaggio del mouse? Grazie :-)

    RispondiElimina
    Risposte
    1. Bisognerebbe modificare significativamente tutto il javascript ...:(
      @#

      Elimina
    2. OK, come non detto.. :) Grazie lo stesso!

      Elimina
  9. Ciao Ernesto ma sarebbe possibile rendere rotonde le immagini?

    RispondiElimina
    Risposte
    1. @# Sì. Devi sostituire questo codice
      -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;
      con quest'altro
      border-radius:999em;-moz-border-radius:999em;-webkit-border-radius:999em;-o-border-radius: 999em;

      Elimina
    2. grazie mille sempre gentililissismo!!!!!

      Elimina

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