Canalblog
Editer l'article Suivre ce blog Administration + Créer mon blog
Publicité
Bienvenue dans le monde réel...
27 juillet 2008

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

Sans_titre_16

Puis entrez votre adresse email et cliquez sur Signup

Sans_titre_17

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 !

Sans_titre_5

Puis sur Add a new one (A ce stade, vous avez le carré bleu à la place de l'avartar)

Sans_titre_18

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.

Sans_titre_2

Importez votre image...puis Next.

Sans_titre_3

Vous devez déplacer le carré blanc en pointillé pour centrer au mieux votre avatar, puis cliquez sur Crop and Finish !

Sans_titre_6

Puis choisissez le "G"

Sans_titre_7

Une fois votre avatar importé, il va apparaitre en bas à gauche...
Cliquez dessus pour le valider !

Sans_titre_4

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 :

Sans_titre_10

Voilà aussi ce que ça peut donner avec un code un peu différent :

Sans_titre_20

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).

Sans_titre_19

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 :

Sans_titre_9

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...

Publicité
Publicité
Commentaires
K
Alors voilà, ça fait pas mal de temps que je suis sur canalblog et j'adore le personnaliser et j'aimerais beaucoup mettre des avatars dans les commentaires, mais je ne suis pas satisfaite des dimensions, je voudrais les redimensionner en 40*40 mais quand je modifie, cela reste en 80*80... Alors si tu as une solution pour ce petit problème ça serait super *o*<br /> <br /> Au fait, ton blog m'a beaucoup aider, il est vraiment superbe &lt;3
A
me voilà inscrite.. ça marche pas sur mon blog maisje vais voir si j'apparais chez toi..
D
Salut Esod,<br /> Mais bien sur ça sera avec grand plaisir [Chesse]<br /> A+
E
ça fait longtemps que j'étias pas venu ^^<br /> Et j'ai remarqué que tu avais mis en ligne le tuto sur Gravatar :D<br /> Je suis content que tu ai pris le temps pour bien tout expliquer, c'est vraiment agréable.<br /> Si ça ne te dérange pas, j'aimerais faire pointer mon tuto sur ton blog car mon tutorial n'était pas aussi pointu.<br /> <br /> Merci d'avance :)<br /> <br /> Bonne continuation :)
N
Juste pour faire un essai[Coeur]
Publicité
Publicité