Pubblicato il 27/09/12e aggiornato il

Widget degli Articoli Casuali con miniature ruotanti per Blogger.

Gadget dei Post Casuali con miniature che ruotano al passaggio del mouse per blog su Blogger.
Il CSS3 permette attraverso le sue trasformazioni degli effetti molto particolari. Il widget che vado a presentare mostra un elenco verticale di post casuali con le miniature che si mettono a ruotare se ci si passa sopra con il mouse.

Le miniature saranno formate dalle immagini presenti nei singoli articoli e ci sarà una immagine di default che verrà visualizzata qualora fossero assenti. Ho postato la solita


Per l'installazione non occorre modificare il modello. Si va semplicemente su Layout > Aggiungi un gadget > HTML/Javascript e si incolla questo 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_info='yes';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 random_posts(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;var IPCEI_postdate=entry.published.$t;if('media$thumbnail'in entry){var IPCEI_thumb=entry.media$thumbnail.url}else{IPCEI_thumb="https://lh3.googleusercontent.com/-OatFFVaLtQ4/UGRZLFbubrI/AAAAAAAAa6g/rmoaOufUxFE/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>');if(IPCEI_info=='yes'){document.write('<span>'+IPCEI_postdate.substring(8,10)+'/'+IPCEI_postdate.substring(5,7)+'/'+IPCEI_postdate.substring(0,4)+' - '+IPCEI_commentsNum)+'</span>'}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=random_posts\"><\/script>')};
</script>
</div>

Si salva il modello e si visualizzerà una cosa simile a questa

articoli-casuali-blogger

Le personalizzazioni riguardano i parametri colorati di rosso:
  1. La visualizzazione della parola Commenti dopo il numero che può essere cambiata o tolta.
  2. La modifica dell'URL della immagine di default che si mostra in assenza di foto nel post
  3. Il  numero dei post da mostrare in var IPCEI_numposts=6
Ricordo che l'effetto rotazione non sarà visibile con Internet Explorer ma il widget rimarrà ugualmente funzionante. Questo widget è una rielaborazione di un lavoro di MyBloggerTools.




27 commenti :

  1. Ottimo, inserito anche io ma come si fa a ridurre la lunghezza dei titoli?

    RispondiElimina
  2. Credi sia possibile nascondere la data senza nascondere la dicitura "commenti" (o equivalente)?

    RispondiElimina
  3. Ottimo. Invece della data e dei commenti è possibile inserire il numero di visite?

    RispondiElimina
  4. Update: credo di esserci riuscita - a nascondere la data, intendo. A ogni modo questo widget è davvero molto bello. Complimenti! :)

    RispondiElimina
  5. @ ...
    Non è possibile creare dei widget con il numero delle visite senza l'utilizzo del PHP e quindi di un sito in cui caricare detto file. Esiste solo quello ufficiale delle statistiche di Blogger.
    Per il resto nei prossimi giorni guarderò che posso fare (senza impegno)

    RispondiElimina
  6. Scusa,scrivo qui perchè ho un problema che non riesco a risolvere. Alcuni blog amici mi hanno inserito fra i blog che seguono nella loro home page, ma del mio blo si vede solo il nome e non si visualizza la foto (miniatura) dell'ultimo posto.
    Da cosa dipende? Considera che ho attivato i Feed e messo su "Completo". Non so più cosa fare. Puoi aiutarmi? se ti serve l'URl del mio blog fammelo sapere.
    GRAZIE GRAZIE GRAZIE!!

    RispondiElimina
    Risposte
    1. @Alexthepinkhouse
      E' un problema che è comune a molti blog. Prova a postare la foto con l'Editor di Blogger senza usare Windows Live Writer e controlla che ci sia il collegamento, nel senso che cliccando sulla foto si deve aprire l'immagine in un'altra scheda.

      Elimina
  7. Grazie per questo post...ti seguo molto volentieri...L ho appena inserito nel mio blog e lo adoro!!! Complimenti Cinzia

    RispondiElimina
  8. Inserito anche io, molto bello a vedersi, speriamo incuriosisca i miei lettori... Grazie!

    RispondiElimina
  9. Ciao Ernesto, ho bisogno del tuo aiuto, sto provando questo widget sul mio blog ma mi da un problema, quando compare il widget sparisce tutto il resto come puoi vedere in questo blog di prova: http://tlentotto.blogspot.com
    cosa sarà mai?

    RispondiElimina
    Risposte
    1. @# In questi casi perché rischiare. Trovati semplicemente un alto widget che sia compatibile con il tuo template. Anche a me capita spesso di non poter utilizzare gadget che invece vanno benissimo su altri siti.

      Elimina
    2. il problema è che ne ho provati tanti di questi widget che visualizzano gli ultimi articoli ma con il template che hai visto non ne funziona nessuno, fanno tutti in quel modo li. Anche quello degli articoli casuali. Non vorrei cambiare template perchè fin'ora c'ho perso un sacco di tempo su questo e poi se cambio magari risolvo questo fatto ma se ne crea qualche altro quindi...
      vabbè comunque grazie che sei sempre disponibile, ciao!

      Elimina
    3. ora ne sto testando uno che mi sembra funzioni bene.

      Elimina
  10. davvero bello grazie, sai se esiste qualche widget orizzontale per articoli random tipo questo

    RispondiElimina
    Risposte
    1. @# I widget orizzontali sono rari ... sul momento non me ne viene in mente nessuno ma non escludo che possono esserci

      Elimina
  11. Complimenti, utilissimo!
    Si può inserire uno snippet al posto della data e il num di commenti? oppure anche solo aggiunto? Grazie.

    RispondiElimina
  12. Ancora qualche domandina per togliermi ogni dubbio.. si possono rendere cliccabili le immagini ruotanti e modificarne le dimensioni?
    Grazie mille.

    RispondiElimina
    Risposte
    1. @# Le miniature possono essere modificate nelle dimensioni tramite questo codice
      width:55px;height:55px;
      Ci sono altri widget con gli snippet
      http://www.ideepercomputeredinternet.com/2011/11/widget-degli-ultimi-articoli-con.html

      Elimina
    2. grazie Ernesto, risolto per quanto riguarda le dimensioni.
      cercavo però espressamente per gli articoli casuali, perchè usando lo scorrimento continuo, il richiamo agli ultimi articoli mi risulta superfluo, ma non importa, non è essenziale.
      Per curiosità e per capire meglio come funziona: a cosa si riferisce "var IPCEI_snippet_length=150;"?
      Per togliere invece data e commenti ho visto che basta modificare "var IPCEI_info='yes';" in "var IPCEI_info='no';" (riporto per altri se dovessero incorrere in questa necessità).
      Invece mi piacerebbe veramente riuscire a rendere le miniature linkabili.. come si fa? ..se si fa!
      grazie ancora e perdonami se abuso della tua infinita pazienza e conoscenza! :D

      Elimina
    3. @# Il widget l'ho tradotto dal blog correttamente linkato a fondo pagina quindi non ho analizzato il codice in modo totale. Comunque IPCEI_snippet_length=150 è la lunghezza dello snippet. Il punto è che non ho trovato la parte del codice in cui sostituire no con yes oppure false con true per mostrarlo.

      Elimina
    4. Grazie lo stesso, e riguardo alla possibilità delle miniature di essere linkabili? si può fare?

      Elimina
    5. Può darsi ma non mi sembra facilissimo

      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.