Gadget commentaires récents avec avatars

Ce qui est cool avec blogger, c'est que les développeurs ont la possibilité de doter la plateforme des widgets très intéressants. Je viens vous proposer ici une trouvaille de Kang Ismet, le gadget "Commentaires récents" avec avatars.

Accrochez-vous et suivez bien les étapes pour intégrer ce petit bidule sur votre blog.

1. Connectez vous à votre compte blogger, cliquez sur “Mise en page” pour le blog où vous allez ajouter la fonctionnalité. Sur la page qui va s’afficher, cliquez sur “Ajouter un gadget” puis sur “HTML/Javascript” sur la pop-up qui va s'ouvrir.

2. Nommez le gadget (ex: "Commentaires Récents") puis ajoutez le code suivant dans la grande case disposée à cet effet.

<style type="text/css">     ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}     .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}     .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}     .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}     .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}     .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[     // Recent Comments Settings     var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://mon-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

3. Paramétrez le gadget à votre gout en changeant les valeurs suivantes (si vous le voulez) :

numComments  = 5, (nombre des commentaires à afficher)


showAvatar  = true,


avatarSize  = 30, (c'est la taille des avatars en pixel)


roundAvatar = true,


characters  = 30, (c'est le nombre des caractères à afficher)


defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm", (url des avatars par défaut)


hideCredits = true;

4. Remplacez mon-blog.blogspot.com par l'url de votre blog et max-results=5 ce chiffre 5 par le nombre maximum des commentaires à afficher.

5. Cliquez sur enregistrer puis, après la disparition de la pop-up déplacez le gadget (en le glissant) pour le positionner à l'endroit qui vous convient. Cliquez sur "Enregistrer la disposition" puis allez admirer le résultat.

Et voilà, en quelques clics vous avez un gadget Commentaires récents avec avatars sur votre blog.

@+