11 (Blogger) Afficher un slide vertical des derniers articles parus

J'avais déjà testé un slide des derniers articles réalisé avec Widget Box, mais je le trouvais trop lent à charger.
J'ai trouvé mon bonheur chez Abu-farhan, un site anglophone.
Le voici :

Pour le réaliser, vous allez dans Présentation > Eléments de la page.

Vous cliquez sur Ajouter un gadget et choisissez HTML/Javascript. Vous y collez ce pavé :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {overflow:hidden;margin-top:5px;padding:0px 0px;height:350px;}
#spylist ul{width:280px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}
#spylist li {width:268px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;overflow: hidden;background:#fff;border:1px solid #ddd;}
#spylist li a {text-decoration:none;color:#4B545B;font-size:11px;height:18px;overflow:hidden;margin:0px 0px;padding:0px 0px 2px 0px;}
#spylist li img {float:left;margin-right:5px;background:#EFEFEF;border:0;}
.spydate{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0px;margin:1px 0px 0px 0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;text-align:right}
.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}
-->
</style>
<script language="javascript">
imgr = new Array();
imgr[0] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WYx_ujI/AAAAAAAAApg/eibXBE0WBB8/s1600/blogger.png";
imgr[1] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WjjgxEI/AAAAAAAAApk/MUYpV8B6HGA/s1600/f.png";
imgr[2] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XJAIVqI/AAAAAAAAApo/5VugGSG_-qM/s1600/google.png";
imgr[3] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XeNX5BI/AAAAAAAAAps/WwjITja3l2M/s1600/rss.png";
imgr[4] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38v9slamI/AAAAAAAAApw/zpmpozFnV2k/s1600/digg.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://les-nouvelles-ficelles-d-annak.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js" type="text/javascript">
</script></div>

Maintenant, vous personnalisez votre slide :

• Vous remplacez http://les-nouvelles-ficelles-d-annak.blogspot.com/ par l'adresse de votre blog.
  

Si vous voulez allez plus loin, la partie CSS se modifie ainsi :

• la hauteur du slide : 

#spylist {overflow:hidden;margin-top:5px;padding:0px 0px;height:350px;}

• la largeur du slide :  

#spylist ul{width:280px;overflow:hidden;list-style-type: none;padding: 0px 0px;margin:0px 0px;}

• la largeur des liens du slide qui doit être relative à celle du slide : 

#spylist li {width:268px;padding: 5px 5px;margin:0px 0px 5px 0px;list-style-type:none;float:none;height:70px;overflow: hidden;background:#fff;border:1px solid #ddd;}

• la date : 

.spydate{overflow:hidden;font-size:10px;color:#0284C2;padding:2px 0px;margin:1px 0px 0px 0px;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;text-align:right} 

• les commentaires :

.spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;padding:0px 0px;margin:0px 0px;}

Le code en javascript peut aussi se modifier :

•  Les adresses des vignettes

imgr[0] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WYx_ujI/AAAAAAAAApg/eibXBE0WBB8/s1600/blogger.png";
imgr[1] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38WjjgxEI/AAAAAAAAApk/MUYpV8B6HGA/s1600/f.png";
imgr[2] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XJAIVqI/AAAAAAAAApo/5VugGSG_-qM/s1600/google.png";
imgr[3] = "http://1.bp.blogspot.com/_RpcwHx8W2XM/TK38XeNX5BI/AAAAAAAAAps/WwjITja3l2M/s1600/rss.png";
imgr[4] = "http://3.bp.blogspot.com/_RpcwHx8W2XM/TK38v9slamI/AAAAAAAAApw/zpmpozFnV2k/s1600/digg.png";

Un point important à connaître, si votre flux RSS est partiel (à vérifier dans Paramètres > Flux d'actualisation), les vignettes de vos articles n'apparaîtront pas, ce sont alors les vignettes ci-dessus qui les remplaceront.

• les marges

cellspacing = 6;

•  Les bordures

borderColor = "#232c35";

•  Les background

bgTD = "#000000";

•  Les dimensions des vignettes

thumbwidth = 70;
thumbheight = 70;

• La taille de la police

fntsize = 12;

• La couleur des liens

acolor = "#666";

• Les liens en gras 

aBold = true;

• Montrer la date

showPostDate = true;

• Le sommaire

summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";

• Le nombre de résumés qui défileront

numposts = 20;

• Le nombre de résumés visibles dans le slide

limitspy=4

• La vitesse du slide

intervalspy=4000