GRAVATAR...OU COMMENT METTRE UN AVATAR DANS LES COMMENTAIRES
Vous avez peut être remarqué, depuis peu...lorsque vous laissez un commentaire sur ce blog, un drôle de carré bleu signé Gravatar s'affiche sur la gauche de votre commentaire...
C'est quoi ?
Pour le moment c'est pas grand chose...à part un carré bleu avec un gros G blanc dedans...
Mais si vous allez sur le site Gravatar et que vous vous inscrivez gratuitement et choisissez un avatar, à chaque fois que vous viendrez sur mon blog et sur tous les blogs où Gravatar est installé, votre avatar s'affichera automatiquement dans les commentaires !
Sympa non !?
Avant de vous donner les codes qui permettent l'affichage de cet avatar, je vais d'abord vous indiquer la marche à suivre pour vous inscrire sur Gravatar et surtout comment mettre votre avatar ! car je sais que pas mal d'entre vous galère avec l'anglais...je vous avoue que moi aussi je rame parfois.
Allez sur le site Gravatar...
Cliquez sur Sign Up pour vous inscrire
Puis entrez votre adresse email et cliquez sur Signup
Vous allez recevoir un email, vous devrez confirmer l'inscription puis retourner sur Gravatar pour choisir un mot de passe.
Une fois inscris, vous êtes sur cette page...
Cliquez sur SignUp Now !
Puis sur Add a new one (A ce stade, vous avez le carré bleu à la place de l'avartar)
Cliquez sur My computre's hard drive si votre avatar se trouve sur votre pc...si votre image est sur le web cliquez sur la ligne en dessous.
Importez votre image...puis Next.
Vous devez déplacer le carré blanc en pointillé pour centrer au mieux votre avatar, puis cliquez sur Crop and Finish !
Puis choisissez le "G"
Une fois votre avatar importé, il va apparaitre en bas à gauche...
Cliquez dessus pour le valider !
Voilà c'est fini...
Votre avatar est désormais associé à votre adresse mail, lorsque vous laisserez un commentaire sur un site avec Gravatar, votre avatar s'affichera sans que vous n'ayez rien à faire...
Maintenant nous allons voir comment installer Gravatar sur votre blog !
Déjà...voilà ce que ça donne chez moi :
Voilà aussi ce que ça peut donner avec un code un peu différent :
Voici le code tel que je l'ai trouvé sur le Blog de De juju, vous pouvez allez voir ce que ça donne dans ses commentaires, et libre à vous d'y apporter des modifications, je vous donnerai le mien plus bas (le mieux étant de l'adapter aux couleurs de votre blog et à vos gouts personnels).
Ouvrez la Page d'un message puis à l'aide de Ctrl+F lancez une recherche pour trouver la balise <CBIfCommentsActivated> repérez ensuite la balise </CBControlForm> un peu plus bas.
Sélectionnez de <CBIfCommentsActivated> à </CBControlForm> donc tout ce qui se trouve entre ces deux balises (comme sur la capture ou j'ai mis des retours à la ligne pour séparer le code du reste).
Maintenant vous allez remplacer ces codes par ceux ci-dessous : (du Blog de juju)
<CBIfCommentsActivated>
<h2><a id="comments">
</a>
<center><img width="315" height="110" border="0" src="https://storage.canalblog.com/98/20/18753/10308124.png" alt="Commentaires" />
<br>
<img border="0" src="http://starkeus.free.fr/antisms_nk.gif" alt="smsinterdit" />
</center></h2>
<CBComments>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td colspan="3"><img src="https://storage.canalblog.com/78/99/18753/17073841.png" width="480" height="20"></td></tr>
<tr><td width="20" background="https://storage.canalblog.com/22/61/18753/17073852.png"></td>
<td background="https://storage.canalblog.com/54/89/18753/17316022.png" width="440">
<a id="c2667984">
</a><h3><font style="color:#FF6C00;"><BlogCommentTitle><h3>
<$BlogCommentTitle$></h3></BlogCommentTitle></font></h3>
<!--<h3><font style="color:#FF6C00;"></font></h3>-->
<p style="color:#FF6C00;"><$BlogCommentBody$></p>
</td>
<td width="20" background="https://storage.canalblog.com/61/10/18753/17316112.png"></td>
<tr>
<td colspan="3" width="480" height="137" background="https://storage.canalblog.com/52/25/18753/17074511.png">
<table cellspacing="0" cellpadding="0" border="0" width="480" height="137">
<tr><td height="29"></td></tr>
<tr><td width="35"></td><td valign="top" align="middle" width="82" height="82">
<table cellspacing="0" onclick="javascript:document.location='http://site.gravatar.com'" style="cursor: pointer;" background="http://www.set.free.fr/nuggets/coloques_gravatar/gravatarblank.jpg" width="80" height="80">
<tr><td>
<img src="http://www.set.free.fr/nuggets/coloques_gravatar/index.php?email=<$BlogCommentAuthorEmail$>&size=80&default=https://storage.canalblog.com/28/00/18753/14177382.gif" border="0">
</td>
</tr>
</table>
</td>
<td width="40"></td>
<td>
Posté par : <strong><$BlogCommentAuthorNickName$></strong>
<font style="font-size: x-small;font:verdana, arial, helvetica, sans-serif;">
<br>Le <$BlogCommentDate$> à <$BlogCommentTime$></font>
</td></tr>
<tr><td height="19"></td></tr>
</table>
</td></tr>
</table>
<br>
<div class="itemfooter"></div>
</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
Personnellement j'ai supprimé pas mal de trucs afin d'épurer au maximum, pour une question d'esthétique par rapport à mon blog.
J'ai aussi ajouté un cadre en pointillé pour les avatars et garder le cadre rouge et gris pour le texte des commentaires...
En fait, chacun fait comme il veut...
Voici le code que j'utilise, ça commence et ça se termine avec les même balises, c'est juste le contenu qui est légèrement différent...si vous préférez cette version, faites comme indiqué plus haut, remplacez vos codes par ceux là.
<CBIfCommentsActivated>
<CBComments>
<a id="c<$BlogCommentId$>"></a> <BlogCommentTitle>
</BlogCommentTitle>
<table cellspacing="0" cellpadding="0" border="0" width="480" height="137">
<tr><td height="20"></td></tr>
<tr><td width="35"></td><td valign="top" align="middle" width="82" height="82">
<table
cellspacing="0"
onclick="javascript:document.location='http://site.gravatar.com'"
style="cursor: pointer;"
background="http://www.set.free.fr/nuggets/coloques_gravatar/gravatarblank.jpg"
width="80" height="80"><tr><td>
<div class="commentaire1"><img
src="http://www.set.free.fr/nuggets/coloques_gravatar/index.php?email=<$BlogCommentAuthorEmail$>&size=80&default=https://storage.canalblog.com/28/00/18753/14177382.gif"
border="0"></div>
</td></tr></table>
</td>
<td width="20"></td>
<td>
<h3><font style="color:#C4C4C4;"><BlogCommentTitle><h3>
<$BlogCommentTitle$></h3></BlogCommentTitle></font></h3>
<div class="commentaire"><p style="color:#FFFFFF;"><$BlogCommentBody$></p></div>
Posté par : <strong><font color="#ffffff"><$BlogCommentAuthor$></font></strong>
<font style="font-size: x-small;font:verdana, arial, helvetica, sans-serif;">
<br>Le <$BlogCommentDate$> à <$BlogCommentTime$></font>
</td></tr>
<tr><td height="19"></td></tr>
</table>
</td></tr>
</table>
<br>
<div class="itemfooter"></div>
</CBComments> <CBControlForm>
<p><$CBControlForm$></p>
</CBControlForm>
Pour ceux qui maitrisent un peu le langage Html et Css, vous aurez remarqué qu'il faut ajouter 2 blocs dans la feuille de style pour mettre en forme le cadre des commentaires...et aussi celui de l'avatar, mais rien ne vous y oblige...
Vous pouvez également mettre un code couleur pour changer la couleur du texte...dans cet exemple, le pseudo de mes visiteurs apparaissent en blanc grâce à cette balises (en blanc) qui entoure la balise qui permet l'affichage du pseudo :
<font color="#ffffff"><$BlogCommentAuthor$></font>
Voici les blocs à ajouter :
.blogbody .commentaire {
background: #404040;
border : 2px dotted #910000;
margin-bottom: 5px;
}
.blogbody .commentaire1 {
background: #000000;
border : 2px dotted #FFFFFF;
margin-bottom: 5px;
}
Une fois que vous avez installé Gravatar dans vos commentaires, vous pouvez aussi ajouter une ligne pour inciter vos visiteurs à s'inscrire sur Gravatar...ça donne ça :
Collez les 2 lignes suivantes au dessus de la ligne :
<h3><a id="comments"></a> Commentaires</h3>
<center><img src="http://Adresse de votre avatar.jpg"></center>
<center>Ton avatar dans les commentaires ? Inscris toi sur <a href="http://en.gravatar.com/">Gravatar</a></center>
Vous pouvez mettre en forme le texte en ajoutant des balises comme <h1>, <h2>, <h3> etc...
Ou encore des balises de couleur ou de taille du texte...
Je remercie tout d'abord Mélou pour m'avoir souffler à l'oreille ce tuto en m'envoyant par mail très gentiment le lien du Blog du Juju...Donc merci aussi à Esod pour son tuto sur le sujet, tout le mérite lui revient.
J'ai reçu pas mal de mails il semblerait que vous ayez quelques difficultés...j'espère qu'avec cette petite vidéo les choses seront plus clairs pour vous...