Widget pour faire defiler les Articles les plus récents dans Blogger



Je vous présente ici la méthode la plus simple pour ajouter un Gadget qui fait défiler les derniers articles / Messages les plus récents de votre blog Blogger.

Widget pour faire defiler les Articles les plus récents dans Blogger


Connectez vous à Blogger, Allez dans "Mise en page", cliquez sur "Ajouter un gadget" puis sur "HTML/JavaScript" et copier / coller le code suivant :

<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:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
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;
}
 
.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://i43.tinypic.com/orpg0m.jpg";
 
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
 
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
 
boxwidth = 255;
 
cellspacing = 6;
 
borderColor = "#232c35";
 
bgTD = "#000000";
 
thumbwidth = 70;
 
thumbheight = 70;
 
fntsize = 12;
 
acolor = "#666";
 
aBold = true;
 
icon = " ";
 
text = "commentaires";
 
showPostDate = true;
 
summaryPost = 40;
 
summaryFontsize = 10;
 
summaryColor = "#666";
 
icon2 = " ";
 
numposts = 10;
 
home_page = "http://www.lebloggers.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>    
 

Important : N'oublier pas de changer l'Url par la votre !

18 Commentaires

Laisser un commentaire

  1. Toutes les images sont deads apparemment

    RépondreSupprimer
  2. @fox Prime : voila ca marche maintenant

    RépondreSupprimer
  3. Nickel, merci ;)
    Nom d'une pipe le problème des images au ratio niqué seras t'il réglé un jour ? :'(

    Ne prend pas ça pour une critique envers toi lol

    RépondreSupprimer
  4. @fox prime : rien compris à ton dernier mesage

    RépondreSupprimer
  5. Ca Marche Pas quand je change d'URL

    RépondreSupprimer
  6. @YN07 : il faut changer cette ligne

    home_page = "http://www.lebloggers.blogspot.com/";

    et ne pas oublier de mettre les WWW.

    Ciao

    RépondreSupprimer
  7. moi j'ai un soucis j'ai changer l'URL et quand je regarde mon blog en 2sec jai une page blanche et plus rien et quand j'enleve " les articles qui defilent" mon blog et normal

    RépondreSupprimer
  8. SA TE MANQUE LE SLASH A LA FIN DE TON URL

    RépondreSupprimer
  9. Ton gadget est extra mais est-ce que je peux l'avoir avec les couleurs de mon blogue ? Si oui, j'ai besoin de savoir quel code modifier svp. Merci !

    Voici le lien de mon blogue :

    http://lemondeselonjeff.blogspot.com/

    RépondreSupprimer
  10. Un très bon gadget qui donne de l'animation au blog.

    Est-il possible de faire de même, mais avec un défilement horizontal et non vertical ?

    Merci d'avance ;)

    RépondreSupprimer
  11. j l'ai essayé et franchement c'est génial
    www.deleguedz.blogspot.com

    RépondreSupprimer
  12. les images n'apparaissent pas

    RépondreSupprimer
  13. Bonjour,
    J'aimerais savoir comment avoir le code de ce widget mais sans les images, est-ce possible et comment?
    Merci de votre réponse

    RépondreSupprimer
  14. Bonjour,
    Serait-il possible de faire défiler sans les images??? Les images cachent le texte. Merci

    RépondreSupprimer
  15. Bonjour,

    ils n'est pas possible d'enlever les images du wigdet.
    Mais vous pouvez redimensinner la largeur on changant " boxwidth = 255;" par la largeur de votre colonne.

    Et aussi les dimensions de l'image on changant les deux lignes :
    "thumbwidth = 70;

    thumbheight = 70;"

    Voila bon courage

    RépondreSupprimer
  16. Sa marche pas pour moi rien ne s'affiche et j'ai changer url

    RépondreSupprimer

Enregistrer un commentaire

Laisser un commentaire

Plus récente Plus ancienne