8 oct. 2010

(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

14 commentaires:

  1. Je me demandais si c'était possible de mettre une courte description de l'article?..merci!

    RépondreSupprimer
  2. Bonjour :) le programme n'est malheureusement pas prévu pour reprendre les premiers mots de l'article

    RépondreSupprimer
  3. Sympa comme découverte Annak je connaissait pas ce site, merci à toi

    RépondreSupprimer
  4. merci mec c'est cool ce post j'ai aimer

    RépondreSupprimer
  5. coucou moi ça ne marche pas j'ai changer l'adresse et quand je veux regarder mon blog ben en 2sec sa m met une page blanche et pas possible de le regarder si j'enleve l'article des articles mon blog marche normalement que faut-il faire pour que ça marche ??

    RépondreSupprimer
  6. Bonjour,

    ton article est super et ton blog aussi. c'est une véritable source de connaissances et d'apprentissage.

    Comment a tu fait pour mettre la date en francais sur ton slide?

    Bonne semaine

    RépondreSupprimer
  7. Merci pour cette astuce. D'une simplicité absolue !

    RépondreSupprimer
  8. Merci pour ces précieux conseils bien documentés cordialement

    RépondreSupprimer
  9. Bonjour !!
    Le slide fonctionne bien... en mode aperçu uniquement. Après avoir enregistré et que je retourne sur mon blog il reste statique (?).

    RépondreSupprimer
  10. Merci beaucoup, ce script a révolutionné mon blog (http://distorsong.blogspot.com pour les curieux) ! Tout marche à la perfection si ce n'est que quand je veux changer le background du cadre, j'ai beau mettre n'importe quelle code couleur ça ne change pas.. et c'est pareil pour la bordure.. Quelqu'un aurait-il une idée?
    Merci infiniment

    RépondreSupprimer
  11. Ca ralenti quand même pas mal mon blog.. :/ Mais le rendu est top^^

    RépondreSupprimer
  12. Possibilité de prêt personnel

    Cher candidat,

    Nous offrons des prêts à partir de € 5000 à 50 millions d'euros à 3%, de la durée de 1 an à 30 ans
    Les personnes intéressées doivent nous contacter par e-mail: carrontim92@postino.net

    Téléphone: +447024044855

    Gestion

    RépondreSupprimer
  13. il ne marche plus...

    RépondreSupprimer

1/ Choisissez Nom/URL comme profil pour poster, si vous hésitez
2/ Si vous désirez une aide personnalisée, pensez à laisser l'adresse de votre blog, ce qui me permettra de tester.
3/ Vous pouvez vous abonner par email pour suivre les réponses de cet article (lien sous la zone de rédaction du commentaire)