Widget articles récents avec images et nombre des commentaires de ceux-ci.

Afficher les articles récents avec une image pour les illustrer, voilà le rêve que doivent avoir nombreux utilisateurs de Blogger.


Grâce à Blogger update, ce rêve est devenu réalité. Un simple code inséré dans un widget Html/Javascript et l'affaire est dans la poche. Il y a même un palliatif pour les articles n'ayant aucune illustration, une image aléatoire est affichée sur les 6 (voire plus) que vous aurez inséré dans le code.

En plus de cela, il y a même possibilité d'afficher le nombre des commentaires de chaque article affiché. Cool non ?

Autre chose, si vous voulez aussi afficher la date de l'article, mettez le lien suivant http://vietwebguide2.googlepages.com/recentposts_thumb4_postdate.js à la place de http://anhvo.info.googlepages.com/recentposts_thumb4.js qui se trouve dans le code que je vais vous donner.

Il vous suffit de coller le code ci-dessous dans un widget Html/Javascript. Pour cela :

1. Aller sur paramètres, flux d'actualisation et mettez flux complet (ça Anne ne le fera pas)

2. Aller sur votre compte Blogger, sur "Mise en page", puis cliquer sur "Ajouter un nouvel élément"

3. Sur la pop-up qui s'ouvre, choisissez Html/Javascript et dans sur l'affichage suivant, donnez un nom à votre widget (par exemple : Récentes publications) et collez le code ci-après dans la grande case.

<script type="text/javascript">
imgr = new Array();

imgr[0] = "http://anhvo.info.googlepages.com/phi00001.png";
imgr[1] = "http://anhvo.info.googlepages.com/phi00002.png";
imgr[2] = "http://anhvo.info.googlepages.com/phi00003.png";
imgr[3] = "http://anhvo.info.googlepages.com/phi00004.png";
imgr[4] = "http://anhvo.info.googlepages.com/phi00005.jpg";
imgr[5] = "http://anhvo.info.googlepages.com/phi00006.jpg";
imgr[6] = "http://anhvo.info.googlepages.com/phi00007.jpg";

tablewidth = 180;
cellspacing = 1;
bgColor = "#ABAE9B";
imgwidth = 45;
imgheight = 45;
bgTD = "#000000";
fntsize = 12;
acolor = "#ffffff";
icon = "•";

text = "commentaires";

numposts = 10;
home_page = "http://en.vietwebguide.com/";

</script>
<script src="http://anhvo.info.googlepages.com/recentposts_thumb4.js" type="text/javascript"></script>


Important ! Lisez ce qui suit pour mieux comprendre ce code :


Les liens allant de http://anhvo.info.googlepages.com/phi00001.png à http://anhvo.info.googlepages.com/phi00007.png : sont ceux des images qui s'afficheront pour les articles n'ayant aucune illustration. Vous pouvez changer celles-ci par les votres.

Number 180: largeur de votre sidebar. N'oubliez pas de l'adapter

Cellspacing = 1 : espace entre les images et les titres des articles.

bgColor = "#ABAE9B" : couleur du contour.

imgwidth = 45; imgheight = 45 : longueur et largeur de l'image.

bgTD = "#000000" : couleur de fond du widget;

fntsize = 12; : taille du texte des liens;

acolor = "#ffffff" : couleur du texte des liens

text = "commentaires" : message pour les commentaires. Si vous ne voulez pas afficher le nombre des commentaires de vos articles dans le widget, changez le en text = "no"

numposts = 10 : le nombre maximum d'articles à afficher.

home_page = "http://en.vietwebguide.com/" - changer le http://en.vietwebguide.com/ par l'URL de votre blog, n'oubliez pas le / à la fin.

Ce widget, je suis sure que beaucoup vont l'aimer.