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

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

L'effetto rotazione sarà visibile con Firefox e Chrome ma non con Internet Explorer 9 o precedenti.