Slideshow verticale degli ultimi articoli con miniatura

Il widget dello slideshow verticale che mostra gli Ultimi post insieme alle miniature della prima immagine che vi è stata pubblicata.

Questo bel widget per Blogger si deve al blog malese Tutorial Untuk Blog. Si tratta di uno slideshow verticale che mostra gli ultimi articoli corredati da miniature. Se non sono presenti immagini da cui ricavarle ne verrà mostrata una di default.

Ho apportato qualche modifica al codice originale e poi ho caricato lo script su un mio spazio. Per l'installazione non occorre modificare il modello ma basta utilizzare un semplice elemento pagina.

   

Andare su Layout > Aggiungi un gadget > HTML/Javascript e incollare in Sezioni del sito questo codice

<style type="text/css">

#verticalslide{height:452px;}

#verticalslide li {height:60px;padding:5px;list-style:none;

background-color:#ffffff;

border:solid 1px #000000;}

#verticalslide a{color:#00000;}

#verticalslide .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;

text-align:justify;

-moz-border-radius: 5px;}

#verticalslide img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.js"></script>

<script type='text/javascript'>

//<![CDATA[

eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('K 11(u){6.4(\'<e l="h">\');G(7 i=0;i<12;i++){7 3=u.N.3[i];7 E=3.J.$t;7 x;8(i==u.N.3.w)I;G(7 k=0;k<3.p.w;k++){8(3.p[k].10==\'Y\'){x=3.p[k].q;I}}7 9;Z{9=3.16$17.15}13(14){s=3.o.$t;a=s.v("<B");b=s.v("A=\\"",a);c=s.v("\\"",b+5);d=s.X(b+5,c-b-5);8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){9=d}f 9=\'F://V.T.D/U/W/R/Q/d/1o.1n\'}6.4(\'<j l="n-J 1k">\');6.4(\'<a q="F://1l-1m.1p.D/" z="1j"><B A="\'+9+\'"/></a>\');6.4(\'<a q="\'+x+\'" z ="1b">\'+E+\'</a><1c>\');8("o"C 3){7 2=3.o.$t}f 8("y"C 3){7 2=3.y.$t}f 7 2="";7 M=/<\\S[^>]*>/g;2=2.1a(M,"");8(2.w<O){6.4(\'<m l="n-P">\');6.4(2);6.4(\'</m>\')}f{6.4(\'<m l="n-P">\');2=2.H(0,O);7 L=2.18(" ");2=2.H(0,L);6.4(2+\'...\');6.4(\'</m>\')}6.4(\'</j>\')}6.4(\'</e>\')}K 19(){r=$(\'e#h j:r\').1d().1h();$(\'e#h\').1i(r);$(\'e#h j:1g\').1e("1f")}',62,88,'||postcontent|entry|write||document|var|if|thumburl|||||ul|else||verticalslide||li||class|span|news|content|link|href|last|||json|indexOf|length|posturl|summary|target|src|img|in|com|posttitle|http|for|substring|break|title|function|quoteEnd|re|feed|numchars|text|hLjqmEbdtkw|AAAAAAAADMA||ggpht|_xcD4JK_dIjU|lh3|SnamIh0KTCI|substr|alternate|try|rel|rpthumbnt|numposts|catch|error|url|media|thumbnail|lastIndexOf|rpnewsticker|replace|_top|br|hide|slideDown|slow|first|remove|prepend|_blank|clearfix|tutorial|gif|noimagethumb|blogspot'.split('|'),0,{}))

//]]>

</script>

<script type="text/javascript">

var speed = 1500;

var pause = 3500;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="verticalslide">

<script style="text/javascript">

var numposts = 6;

var numchars = 0;

</script>

<script src="https://www.ideepercomputeredinternet.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

Cliccare su Salva e posizionare il widget mediante il trascinamento del mouse. L'altezza del widget è stata calcolata in 452 pixel se si vogliono mostrare gli ultimi 6 articoli. Nel caso volessimo modificare tale numero occorre cambiare anche tale parametro. E' possibile operare delle configurazioni sui codici dei colori, sulle dimensioni dei caratteri, sui colori e stili dei bordi,  sulla velocità di scorrimento (var speed) e sulla durata della pausa (var pause). E' essenziale sostituire l'URL di questo blog colorato di viola con quello del vostro sito. Ecco come si presenta il widget

I colori dei link dei titoli saranno quelli ereditati dal blog. Se avete un dominio personalizzato scaricate il javascript colorato di blu e caricatelo su Dropbox o su un vostro spazio personale. Sono sicuro che questo gadget dello slideshow verticale degli ultimi post incontrerà parecchi estimatori.

AGGIORNAMENTO:Il codice che prima era stato caricato su Google Sites adesso è stato aggiunto nativamente senza bisogno di caricarlo da siti esterni