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://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>');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

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.