Inserire Slideshow degli ultimi Post in Blogger

Lo dico subito: questo è un espediente manuale ricavato da uno script di Parsifal (nel suo blog c'è di tutto).

Parsifal aveva tirato fuori questo codice come SlideShow degli ultimi post per la barra laterale. Sul mio blog l'ho utilizzato per parecchio tempo. L'effetto movimento dei post da un tocco professionale al blog ma in questo momento sto vivendo la mia fase minimalista e ho deciso di "pulire" un po' il blog.

Il widget "SlideShow per gli Ultimi Post" Parsifal lo ha pubblicato e ne ha spiegato il suo funzionamento in questo post.

Io mi limiterò a pubblicare le mie modifiche grafiche per rendere il widget adatto al nostro scopo.

Stiamo parlando di un widget (Post featured content) che su altre piattaforme come Wordpress è facilissimo adottare tramite plugin. Su blogger non esiste nulla di simile tranne un template che una volta ho trovato che dava di default lo SlideShow dei post. (Ma adesso non ricordo il nome di quel Template.

Pas de quoi, dicono i francesi ora vediamo se le mie modifiche vi piacciono. Date subito un'occhiata a questo blog (molto rosso) che lo ha adottato.

Ora vediamo come installare il widget.

Allora la cosa più bella è che non sarà necessario effettuare modifiche al codice html del blog. (Uff)

Basterà incollare questo codice in un elemento Html della barra laterale

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:205px;
}
#spylist ul{
width:500px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:500px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:205px;
overflow: hidden;
background:#fff url(http://hgavqa.blu.livefilestore.com/y1pZTPL3rn8D7HlTL-M1SzV17ZT3B9MzCkegyNt7aTZUrF3edUefcfoJACfprZ8QTAid-cEApkFmM9rxkd7vvqSZXJbfLpayXFx/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#aa0000;
font-size:24px;
height:24px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#e3e3e3;
border:0;
}
.spydate{
overflow:hidden;
font-size:16px;
color:#353535;
padding:2px 0px;
margin:3px 0px 0px 0px;
height:15px;
font-family:Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Arial,verdana, sans-serif;
font-size:10px;
color:#444444;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://tinyurl.com/oj827g";
imgr[1] = "http://tinyurl.com/qzptmk";
imgr[2] = "http://tinyurl.com/ok629f";
imgr[3] = "http://tinyurl.com/omglru";
imgr[4] = "http://tinyurl.com/q4wtpo";
showRandomImg = true;
boxwidth = 210;
cellspacing = 6;
borderColor = "#eeeeee";
bgTD = "#000000";
thumbwidth = 235;
thumbheight = 200;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "commenti";
showPostDate = true;
summaryPost = 50;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = "[CQ] ";
numposts = 5;
home_page = "http://NOMEBLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://sites.google.com/site/ideepercomputeredinternet/script-1/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

(ps. personalizzate sostituendo NOMEBLOG con l'indirizzo del vostro blog)
Salvate il widget e adesso la trovata...spostate il widget (nell'immagine e "ULTIME NOTIZIE) appena creato sopra il riquadro dei post...così:

Adesso salvate il template et voilà.
V'è piaciuto?
Andate a ringraziare anche Parsifal


Se avete dubbi lasciatemi un commento. Se tutto sommato questo post vi è tornato utile allora abbonatevi al mio feed.