Widget Commentaires Récents Avec Avatars Pour Blogger

Ajouter le widget "Commentaires Récents Avec Avatar" pour afficher les derniers commentaires de votre blog Blogger.
Si vous voulez contrôler complètement ce qui apparaît sur votre blog, voici un article présentant une fonction affichant la liste des derniers commentaires.
Le gadget "Commentaires Récents" affiche le nom du commentateur, son avatar, un extrait du commentaire et un lien lire la suite.
En plus, le widget est facile à utiliser et à personnaliser.

Démonstration

Voici une capture d'écran du résultat final :

Ajouter Le Widget Commentaires Récents Avec Images à Blogger

Connectez-vous à Blogger, allez dans "Mise En Page" ➥ "Ajouter Un Gadget" ➥ dans la liste proposée sélectionnez "HTML/JavaScript" ➥ choisissez le titre du gadget (ex: Commentaires Récents) et copier/coller le code suivant dans la grande case puis cliquez sur "Enregistrer"

<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     = 40,
    showMorelink    = true,
    moreLinktext    = "Suite »",
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",
    hideCredits    = true;
//]]>
</script>
<script type="text/javascript" src="http://commentaire-recents.googlecode.com/files/Tblogueur.js"></script>
<script type="text/javascript" src="http://www.theblogueur.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Personnalisation Du Gadget

Vous pouvez,si vous voulez, personnaliser le widget "Commentaires Récents" en modifiant les valeurs suivantes :
    numComments     = 5,  ➥ Le nombre de commentaires à afficher
    showAvatar     = true, ➥ Si vous voulez désactiver l'affichage d’avatars remplacer true par false
    avatarSize     = 30, ➥ La taille de l'avatar en pixel, remplacer 30 avec la valeur que vous voulez
    roundAvatar    = true, Pour afficher les avatars en carrés, remplacer true par false
    characters     = 40, ➥ le nombre de caractère à afficher
    showMorelink    = true, ➥ Afficher ou non un lien lire la suite
    moreLinktext    = "Suite »", ➥ le titre du lien lire la suite
    defaultAvatar     = "http://www.gravatar.com/avatar/?d=mm",  ➥ url des avatars par défaut
 
Vous devez absolument modifier http://www.theblogueur.blogspot.com avec l'adresse de votre blog.