Ecrire un message au dessus du cadre commentaires

L'espace des commentaires permet à vos lecteurs d'y laisser des avis, de poser des questions, de faire des remarques. Parfois, on note quelques violations des règles de bienséance, de courtoisie et savoir vivre parmi les commentaires.

L’un des moyens pour diminuer considérablement le nombre des dérapages dans l’espace de commentaires est de laisser un message, juste au dessus du formulaire pour commenter. Dans ce message vous soulignerez à vos lecteurs les règles à respecter, ou du moins à ne pas violer, lors de la rédaction d’un commentaire.

Pour avoir une notice qui s’affiche au-dessus du formulaire de commentaire, voici ce que vous devez faire :

1. Vous connecter à Blogger et aller sur “Paramètres”.

2. Cliquer sur “Publications et commentaires” (voir la barre à gauche)

3. Ecrivez votre notice dans le cadre réservé pour le “Message du formulaire de commentaire”

4. Cliquez sur le bouton “Enregistrer les paramètres”

Vous aurez maintenant un message qui va s'afficher au dessus du cadre du formulaire de commentaire de votre blog.

Lire la suite

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.

@+

Lire la suite

Blogger nous refile les fils des commentaires

Il y a de ces nouvelles qui peuvent sortir un type du coma, autant il y en a qui peuvent faire sortir une souris de sa cachette (l'annonce de la mort du chat bien sûr). Cela fera maintenant une année que je n'ai pas publié d'articles sur ce blog (hou, le vilain garçon), restant un observateur attentif mais discret des évolutions que connaît la plateforme que j'utilise toujours mais sur différents blogs.

Si je suis sortis de mon silence aujourd'hui, c'est parce qu'une des nouvelles fonctionnalités de Blogger m'a vraiment remplis le coeur de joie, le genre de truc auquel je ne m'attendais pas pour sitôt. Blogger ajouter la possibilité d’avoir des commentaires filetés sur la plateforme.

Il est donc maintenant possible de répondre directement à un commentaire particulier parmi les commentaires d'un article, et non plus de laisser un commentaire qui s'affichera très loin derrière le commentaire auquel on répond (quand il y a eu d'autres commentaires qui ont été postés entre temps). Ceci rend facile la distinction entre un commentaire à l'article en générale et  une réponse à un commentaire particulier.

Pas bien compris ? Bon, imaginez qu'il y a deux commentaires sur une page donnée et que vous voulez répondre au premier commentaire. Il vous suffira juste de cliquer sur “Répondre” juste en dessous dudit commentaire.

Ceci fera apparaitre un formulaire de commentaire entre le commentaire auquel vous voulez répondre et celui qui lui succède.

Ainsi, vous aurez le merveilleux résultat que voici :

Pour avoir cette fonctionnalité disponible sur votre blog, vérifiez que vos paramètres ont “complet” pour “Autoriser les flux de blog” (voir “Paramètres” puis “Autre”) et que vous avez “Imbriqué” pour “Emplacement des commentaires” (voir “Paramètres” puis “Publications et commentaires”).

 

Pour moi, cette fonctionnalité est un cadeau merveilleux pour commencer l’année et me pousse à recommander encore plus Blogger. En attendant les autres fonctionnalités qui apparaîtront dans les jours à venir, je vous souhaite à toutes et à tous :

 UNE TRES BONNE ANNEE 2012

Lire la suite

Couleur de fond différente pour les commentaires de l'auteur du blog

J'avais dernièrement publié un article sur la possibilité d'afficher les photos des auteurs des commentaires avec une couleur de fond différente pour les comentaires du proprio du blog. Seulement, cette astuce était basée sur l'insertion d'une image comme fond avec seulement la même couleur verte, ce qui fait beaucoup ne pouvaient incorporer cette astuce dans leurs blogs car difficile à marier avec le reste du design.

C'est pourquoi, aujourd'hui nous allons voir une astuce simple qui permet, sur n'importe quel modèle blogger, d'avoir une couleur de fond et des textes différent pour les commentaires de l'éditeur du blog.

1. Se connecter à Blogger, aller sur "mise en page" puis sur "modifier le code html". Cocher sur la case "développer des modèles de gadget"

2. Juste avant la balise ]]></b:skin>, mettre le code suivant :

.comment-body-author {
background: #E6E6E6; /* couleur de fond*/
color: #000; /* couleur du texte*/
}

Pour avoir une image faisant office de couleur de fond, mettez plutôt le code suivant :

.comment-body-author {
background: #E6E6E6 url("http://url-de-limage.gif"); /* Image de fond, couleur s'affiche si image pas disponible*/
color: #000; /* couleur du texte*/
}

Remplacez http://url-de-limage.gif par le lien vers l'image que vous aurez hébergée quelque part sur le net.

Pour le reste du code css, les margins, paddings et autres, je vous conseille de vous référer au css de vos commentaires, copiez juste les données restantes avant le } et ce sera bon.

3. Insérer les codes en rouge à l'emplacement indiqué :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

4. Enregistrez le modèle puis allez admirer le résultat.

@+

Lire la suite

Afficher plus de 200 commentaires

Sur Blogger, il existe pour les commentaires une limitation de 200 à afficher sur une page d’article. Seulement, si vous avez un blog aussi populaire que Papilles et pupilles avec des articles ayant plus de 200 commentaires, c’est agaçant de ne pas voir les autres commentaires être affiché.

Normalement, dès qu'un article a plus de 200 commentaires, vous devrez voir apparaître des liens permettant aux lecteurs d'aller voir les commentaires le plus récents ou les plus anciens (voir sur exemple sur cette page qui a plus de 800 commentaires). 

Si ces liens n'apparaîssent pas sur votre blog, il vous suffit d’ajouter un bout de code dans le widget blog1 (celui qui affiche les articles), ceci pour donner aux lecteurs la possibilité de jeter un coup d’œil aux commentaires qui ne s’affichent pas en cliquant sur un lien pour aller sur la page suivante des commentaires.

Voici les étapes à suivre pour arriver à cette fin :

1. Se connecter sur votre compte Blogger, aller sur Mise en page puis sur « Modifier le code html ».

2. Trouver la ligne suivante :

<b:includable id='comments' var='post'>

Quelques lignes après celle-ci, vous trouverez cette ligne <dl id='comments-block'> qui est elle précédée de </h4>.

3. Entre les lignes citées ci-haut, mettez le code suivant :

<b:if cond='data:post.commentPagingRequired'>

        <span class='paging-control-container'>

          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>

          &#160;

          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>

          &#160;

          <data:post.commentRangeText/>

          &#160;

          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>

          &#160;

          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

        </span>

      </b:if>

Ce qui donnera le résultat suivant :

<b:includable id='comments' var='post'>

  <div id='comments'>

    <a name='comments'/>

    <h4>

      <b:if cond='data:post.numComments == 1'>

        1 Comment:

      <b:else/>

        <data:post.numComments/> Comments:

      </b:if>

    </h4>

<b:if cond='data:post.commentPagingRequired'>

        <span class='paging-control-container'>

          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>

          &#160;

          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>

          &#160;

          <data:post.commentRangeText/>

          &#160;

          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>

          &#160;

          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>

        </span>

      </b:if>

    <dl id='comments-block'>

      <b:loop values='data:post.comments' var='comment'>

4. Enregistrez votre modèle et allez admirer le résultat sur un article qui a plus de 200 commentaires.

Notez que vous pouvez remplacer le code en bleu par une phrase du genre "commentaire plus anciens" et le code en rouge gras par une phrase du genre "commentaire plus récents" (ou une phrase qui ira avec le style de votre blog). Vous pouvez même mettre à la place des images, en ajoutant bien sur un balise du genre :

<img src="url_de_limage" border="0" alt="Texte Alternatif" />

Bon, voilà, je crois qu'avec ça, les lecteurs pour voir tous les commentaires publiés sur un article.

@+

Lire la suite

Affichage Photos commentateurs et couleur de fond différentes

En 2007, nous avions enseigné une technique pour afficher les photos des commentateurs qui disposent d’une photo de profil sur Blogger. Mais, depuis quelques temps, Blogger permet d’afficher les photos des commentateurs même sur les blogs qui ont choisis d’intégrer un formulaire des commentaires à la fin des articles, ce qui a rendu notre première astuce à moitié hors service. Bien que les bulles qui encadrent les commentaires s’affichent encore et qu’il y a moyen de différencier les commentaires des lecteurs de celui du proprio du blog par la couleur de fond, les photos elles ne s’affichent plus.

Avant de voir comment remédier à ce problème, expliquons les méthodes fournies par Blogger pour afficher les photos de profil sur les commentaires (quelqu'un m'avait contacté pour écrire cet article il y a 3 semaines, mais depuis plus aucun signe de vie malgré mon accord).

Si vous désirez afficher les photos des commentateurs sur un Blog Blogger, rien de plus simple. Il suffit d’aller sur « Paramètres », puis sur « Commentaires » et là, cocher sur "oui" pour l’option «Afficher les photos de profil sur les commentaires ».

Au cas où les photos ne s’affichent pas du tout malgré l’activation de l’option citée ci-haut, utilisez cette méthode de Soufiane :

1. Aller sur « Modifier le code html » et trouvez l’une  de deux lignes suivantes :

<dl id='comments-block'>

Ou

<div id='comments-block'>

2. Remplacez la ligne que vous trouverez par 

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Notez que si vous remplacez le <div id='comments-block'>, il vous faudra chercher le </div> qui clôture celui-ci et le remplacer par </dl>

Au cas où vous ne trouvez pas les premières lignes indiquées, cherchez plutôt la troisième. Si elle existe, passez à l’étape suivante.

3. Trouvez la ligne suivante :

<a expr:name='data:comment.anchorName'/>

Remplacez-la par celle-ci :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='50px' style=' margin: 25px 0 0 0;' width='50px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

Ajouter une bulle avec différentes couleurs de fond pour les commentaires

Pour avoir une bulle entourant les commentaires avec couleur de fond différent pour les commentaires de l’auteur du blog et ceux des visiteurs :

1. Dans le css de votre blog, mettre les codes suivants et effacez ceux similaires qui existaient avant (voir la nomination en gras)

.comment-body { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body p { background:#d0d0d0; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; }
.comment-body-author { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body-author p { background:#ccdacc; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; } .comment-author { margin: 0px 0px 0px 0px; padding: 0 10px 0 40px; color: #777; font-size: 16px; font-weight:bold; background: url(http://www.blogblog.com/tictac/comment_arrow.gif) no-repeat 20px 7px;}

* html .comment.favicon { /*IE only*/

  margin: 30px 0 0 0;

}

2. Juste après le code suivant

<b:loop values='data:post.comments' var='comment'>

Mettre

<!-- kaie added for comment-body-author highlight begenning1-->
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<!-- kaie added for comment-body-author highlight ending1-->
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if> <!-- kaie added for comment-body-author highlight -->

3. Enregistrez votre modèle et youpi !

Vous avez vos commentaires qui s’afficheront avec photos de leurs auteurs en plus d’une différenciation des commentaires du proprio du blog de ceux des visiteurs par la couleur de fond.

Lire la suite

Changer la taille du formulaire des commentaires

L’une des caractéristiques de lecteurs de ce blog ainsi que de tous ceux qui fouillent le net à la recherche d’astuce pour améliorer leur blog, c’est qu’ils veulent avoir un blog différent de celui du voisin.

Cette différence vous pouvez l’avoir même dans la taille du formulaire des commentaires fournit par Blogger. Pour cela, il vous suffit de vous connecter sur Blogger, d’aller sur « Mise en page », puis sur « Modifier le code html » et là, cochez sur « Développer des modèles de gadget ».

Trouvez le code suivant et  changez-en la valeur selon votre goût (voir les éléments en gras ).

<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='auto' src='' width='100%'/>

Enregistrez votre modèle et allez admirer le résultat. S’il ne vous plaît pas, vous toujours revenir changer de nouveau les valeurs.

@+

Lire la suite

Ajouter une photo à la notice pour les commentaires

Bien que chez moi on dit que trop d’esthétiques avait avilit le vélo, je n’ai pas hésité à monter ce blog pour vous fournir quelques astuces afin de mieux personnaliser vos blogs.

L’astuce que nous allons voir aujourd’hui, une astuce d’Antonio Lupetti, vous permettra de mettre une photo avec une notice juste avant la section des commentaires au bas de la page. Je conseille à ceux qui veulent utiliser cette astuce d’insérer le formulaire de commentaires à la fin de l’article.

<div class="Notice-commentaires" style="padding: 8px; background: rgb(239, 239, 239) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; margin-bottom: 0px;">
<img class="profileImage" src="#">
Votre petite notice à ceux qui vont commenter est à mettre ici (genre, ne spamez pas, ne dites pas des grossiérêtés) <br>
<div class="spacer"></div>
</div>

Dans le code ci-haut, remplacez # par l’url de l’image de votre profil (ou votre avatar)

1. Connectez-vous sur votre compte Blogger

2. Allez sur « Mise en Page », puis sur « Modifier le code Html ». Et là, cochez sur « développer des modèles de gadget.

3. Trouvez les code suivants :

Si vous n'avez pas inséré le formulaire de commentaire à la fin des articles, mettre le code après ces deux lignes :

<p class='comment-footer'>

<b:if cond='data:post.allowComments'>

si vous aviez inséré le formulaire de commentaire à la fin de l'article, insérer le code juste après les lignes suivantes :

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>


4. Enregistrez le modèle et allez voir le résultat.

@+

Lire la suite

Widget Mur commentaires à la Facebook dans la sidebar

Il y a quelques jours, quelqu'un m'avait demandé comment mettre une option de commentaire qui soit visible dans la sidebar et qui permettrait aux visiteurs de commenter sur le blog en général et non seulement sur un article particulier comme proposé par Blogger.

Il faut vous avouer que je ne croyais pas trop que cela était possible et c'est ainsi que je lui avais proposé de plutôt voir comment installer une boîte de dialogue dans la sidebar. Mais, en passant aujourd'hui sur le blog de Vin, j'ai trouvé une astuce pour instaurer un widget pour commentaire dans la sidebar grâce à googlefriend. Ce widget sera un peu comme le mur de commentaire que l’on trouve sur FaceBook (voir en image et sur mon blog).


L'avantage de ce widget est qu'il peut afficher les visages des commentaires s'ils avaient mis leurs photos sur Google friend et puis, on peut répondre particulièrement à un commentaire donné par quelqu’un (chose que ne propose pas blogger).

Pour avoir cette petite merveille sur votre blog, il faut commencer par installer le widget "Abonnés fidèles" proposé par Blogger. Pour cela, aller sur votre compte, puis sur "Mise en page" et là cliquer sur "ajouter un nouvel élément". Dans la pop-up qui s'ouvrira, optez pour "Abonnés fidèles". Dès que le widget est installé dans votre blog, passez aux étapes suivantes :

1. Aller sur "Modifier le code html" et cochez sur "développer des modèles de gadget" sur la nouvelle page qui s'ouvrira (juste au dessus de la case avec le code html)

2. Afficher votre blog. Sur la page d'accueil, faites CTRL+U afin d'afficher le code source de celui-ci. Ou, aller sur Affichage (sur votre navigateur) et sélectionner "afficher le code source".

3. Trouvez la ligne suivante (faites CTRL+F et collez la ligne ci-après afin que l'ordi le trouve) :

google.friendconnect.container.renderMembersGadget

4. Prenez le numéro qui se trouve juste un peu plus bas, après "site", c'est l'identifiant de votre blog sur Googlefriend

google.friendconnect.container.renderMembersGadget(
{ id: "div-1238464215135",
site: "NUMERO-A-PRENDRE" },
skin);
</script>

Copiez ce numéro dans un fichier notepad, wordpad, ou word (à moins que vous n'ayez un autre endroit où le conserver).

5. Copiez le code suivant :

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
skin['DEFAULT_COMMENT_TEXT'] = '- Ajoutez votre commentaire ici -';
skin['HEADER_TEXT'] = 'Commentaires';
skin['POSTS_PER_PAGE'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderWallGadget(
{ id: 'div-comment-wall',
site: 'NUMERO-A-PRENDRE',
'view-params':{"disableMinMax":"true","scope":"SITE","allowAnonymousPost":"true","features":"video,comment","startMaximized":"true"}
},
skin);
</script>

6. Remplacez "NUMERO-A-PRENDRE" par le numéro pris à l'étape 4.

7. Vous pouvez remplacer les mots en gras en ceux qui vous conviennent, ils s'afficheront comme ceci dans votre blog :

8; Pour changer la taille (largeur) de votre widget, afin qu'il tienne bien dans votre sidebar, voir le chiffre après width

div id="div-comment-wall" style="width:210px;border:1px solid #cccccc;"></div>

#cccccc est la couleur de la bordure du widget, vous pouvez aussi la changer.
1px est l'épaisseur de la bordure, vous pouvez mettrez un chiffre supérieur.

9. Vous pouvez aussi changer les couleurs de votre widget en remplaçant les valeurs exadécimales des couleurs contenues dans le code par ceux qui vous conviennent (voir les codes numériques de couleurs ici et là). Vous dans le code de l'étape 5 :

skin['BORDER_COLOR'] = '#cccccc'; Pour la couleur de la bordure
skin['ENDCAP_BG_COLOR'] = '#e0ecff';(couleur de fond de l'entête = bleu ciel)
skin['ENDCAP_TEXT_COLOR'] = '#333333';(Couleur texte à l'entête)
skin['ENDCAP_LINK_COLOR'] = '#0000cc'; (couleur lien à la fin de l'entête)
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff'; Couleur de fond du contenu
skin['CONTENT_LINK_COLOR'] = '#0000cc'; couleur des liens du contenu
skin['CONTENT_TEXT_COLOR'] = '#333333'; Couleur du texte du contenu
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc'; couleur secondaire des liens
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666'; couleur secondaire du texte
skin['CONTENT_HEADLINE_COLOR'] = '#333333'; couleur de l'entête (le mot "commentaires")

10. Pour augmenter le nombre de commentaire à afficher simultanément sur le widget, mettre un nombre supérieur à la place de 5 (mais ce nombre ne doit pas être supérieur à 15):

skin['POSTS_PER_PAGE'] = '5';

Pour interdire le commentaires anonymes, effacer :

"allowAnonymousPost":"true",

11. Après avoir fini d'attribuer à votre widget les particularités qui lui sont nécessaires, aller sur "Mise en page" et choisissez "ajouter un nouvel élément" dans votre sidebar (barre latérale)

12. Sur la pop-up qui s'ouvre, choisissez "Html/Javascript" et collez le code de votre widget dans ce nouveau widget. Enregistrez les modificatgions et allez voir les résultats.

Quelqu'un me laissera-t-il un petit bisous ?

Lire la suite

Le plus beau commentaire ?

Il m'était déjà arrivé de voir sur un blog dont le lien était posté sur Digg un commentaire qui sortait de l'ordinaire. Celui-ci était un long texte rimé, qui pourrait constituer le lyric d'un rap et avait été posté en réaction à un article sur un rappeur (je crois que c'était Eminem).

Hier, j'ai moi aussi eu la surprise de constater que mon blog venait de recevoir un commentaire pas comme les autres. Toute une oeuvre d'art. Quand je songe au temps passé pour le constituer, les paroles qui y sont exprimés et le message véhiculé par les images y figurant, je me dis que cela est venu tout droit du coeur. Vous pouvez voir ce commentaire à la fin de l'article "Google traduction avec Drapeaux". Je remercie vivement son auteur, ziabhuita20002000, dont je n'ai malheureusement pas pu trouver l'adresse du blog.

Lire la suite

Numéroter les commentaires

Bien que la numérotation des commentaires est présente dans certains modèles, cela n’est pas une fonctionnalité présente par défaut sur Blogger.

L’utilité de numéroter les commentaires est que lorsqu’un article en a plusieurs, on peut facilement revenir relire un certain commentaire quand on connaît son numéro. Cela permet aussi de facilement récolter le lien vers un commentaire donné, et donc de facilement renvoyer les lecteurs à celui-ci.

Pour numéroter vos commentaires, aller sur « Tableau de bord, > Mise en Page, > Modifier le code Html » et cocher sur « développer des modèles de gadget ».

Trouver la première ligne de code et ajouter la partie en gras dans le reste du code.

<b:includable id='comments' var='post'>

........

<dl id='comments-block'>

<script type='text/javascript'>var CommentsCounter=0;</script>

<b:loop values='data:post.comments' var='comment'>

<dt style='clear: both;' class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'>

<data:comment.author/>

</a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

<span class='numberingcomments' style='float: right; font-size: 20px;'>

<a expr:href='data:comment.url' title='Comment Link'>

<script type='text/javascript'>

CommentsCounter=CommentsCounter+1;

document.write(CommentsCounter)

</script>

</a>

</span>

</dt>

<dd class='comment-body'>

.......

</dd>

</b:loop>

</dl>

Enregistrer votre modèle et dites merci à Quite Random.

P.S. : La taille du numéro peut être changée. Pour cela, changer la valeur numérique de font-size: 20px

Vous pouvez styler l’affichage de la numérotation en ajoutant des propriétés juste avant la balise de votre modèle :

.numberingcomments {

/* ajouter les propriétés css ici*/

}

@+

Lire la suite

Widget récents commentaires avec Feedburner

J'ai récemment découvert qu'il était possible d'avoir un widget "Récents commentaires" grâce à feedburner.

Pour cela, il suffit de créer un nouveau flux sur feedburner grâce au flux commentaires de votre blog.

Voici l'url du flux de commentaire de votre blog (remplacez "lenomdevotreblog" par le renseignement correspondant)

http://lenomdevotreblog.blogspot.com/feeds/comments/default?alt=rss


Mettez cette url dans la case appropriée après vous être connecté sur feedburner.com.

 Après avoir suivi les 2 autres étapes pour la création de ce nouveau flux et avoir reçu confirmation, rendez vous sur "Publicize".Cliquez sur Buzz boost sur la colonne droite. Choisissez le nombre des commentaires à afficher et s'il faut que le lien s'ouvre sur une nouvelle fenêtre (pas conseillé). Puis cliquer sur "activate" (ou save) et prenez le code html de ce widget et collez-le dans votre blog.

Sinon, mettez l'url du flux que vous venez de créer dans le code suivant :

<script src="http://feeds.feedburner.com/souvcomment?format=sigpro" type="text/javascript"></script>

Ce widget est visible sur mon blog Souvenirs de prison.

@+

Lire la suite

Intense Debate pour les commentaires sur Blogger

Demandé par Rodney pour faire écho à l'article de Feufol sur "Un autre style pour les commentaires sur Blogger", ce second volet parle d'une autre plate-forme de commentaires: Intense Debate.

Peut attirant par sa complexité, devenant vite une barrière pour les non-utilisateurs de Blogger, le formulaire d'origine de Blogger n'incite pas vraiment le visiteur à s'exprimer...C'est cet aspect peut engageant qui m'a poussé a chercher une alternative crédible pour mon blog, pouvant si possible se rapprocher des standards de commentaires Wordpress avec des cases claires et faciles à remplir. Intense Debate s'est vite imposé car il répond à ces points tout en ajoutant l'édition de commentaire.

Un formulaire enfantin.

Alors tout d'abord, Intense Debate c'est un formulaire simple permettant à chacune et chacun ne possédant pas de compte particulier sur une quelconque plate-forme de blogging de laisser un commentaire et de le signer de son pseudo et l'url de son site. Ce point et très important car un blogger aime faire de la pub pour son blog quand il fait un commentaire. cette plate-forme est en sus compatible avec les gravatars.Remarquez, pour les personnes ayant un compte Intense Debate, se connecter est un véritable jeu d'enfant avec le bouton "Login" situé directement au dessus de la zone de commentaires.

En harmonie avec le blog.

Au chapitre intégration et harmonie avec le blog, Intense Debate n'est pas en reste avec une interface en relief du plus bel effet (sauf sur fond blanc..).

Les commentaires de l'auteur du blog sont dans un encadré bleuté pour une meilleure distinction, et la taille des encadrés est paramètrable selon 3 styles prédéfinis depuis le dashboard.

Un flux RSS dédié à vos commentaires est intégré dans l'interface, sans oublier les nombreux widgets faciles à intégrer. Commentaires les plus récents, meilleurs commentateurs, etc. il y en a pour tous les goûts. Je regrette juste qu'il manque un nuage de tag pour les commentaires... (très pratique pour mettre en avant ces derniers)

Un choix de paramétrages variés.

Le dashboard est assez complet avec un lot de paramétrages inédits sur Blogger, avec par exemple des filtres, la possibilité de blacklister des gens, etc.


L'installation d'Intense Debate peut se faire via la feuille de style (facile et semi-automatisé) ou par widget ( chose que je déconseille car le formulaire Blogger sera dans ce cas encore apparent ), et uniquement sur les nouveaux posts ou sur tous au choix.

A moins que vous n'ayez une grande quantité de commentaires, je ne peux que vous inciter à l'installer sur tout les posts car cette plate-forme à l'avantage de disposer d'un module d'importation des anciens commentaires! Cela marche à merveille désormais.

Pour finir, Intense Debate c'est aussi une communauté (principalement anglophone car le service est en anglais...) comme on peut en voir fleurir un peu partout, et un système de notation unique des commentaires permettant de définir les plus pertinents ou appréciés.

Bref, un (très) bon moyen de doter son blog d'un formulaire de commentaires complet et qui donne envie de commenter!

Voilà à peu près tout sur Intense Debate; en espérant vous avoir convaincus, et pourquoi pas convertis. Et puis un grand merci à Rodney de m'avoir proposé de faire un article ici sur Blogger au bout du doigt.

Mister aiR, blogmaster des blogs OroO/Oro'o et Le Canard qui Croque.

Lire la suite

Compteur d'articles et commentaires de votre blog

Le voeux de Link était celui de savoir comment mettre un compteur d'articles et des commentaires du blog qui soit automatique (il est fatigué de le faire manuellement à ce qu'il paraît).

Il faut avouer que je ne savais pas trop comment faire ça jusqu'à ce que je passe sur le blog de tOiNOU, Ackorea . Là, j'avais pu remarquer au bas de la page une indication du nombre d'articles et des commentaires qu'il y a sur le blog. Je suis allé vérifier sur le code source pour voir si c'était fait manuellement ou automatiquement et Bingo ! C'est automatique. Voici pour vous le script utilisé, remplacez juste urldevotreblog par l'url de votre blog, puis mettez-le dans un widget Html/Javascript.

<script style='text/javascript'>
function showpostcount(json) {
document.write(parseInt(json.feed.openSearch$totalResults.$t,10));
}</script>
<script src='http://urldevotreblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount'></script> articles et <script src='http://urldevotreblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showpostcount'></script> commentaires

Lire la suite

Vos commentaires avec bulles et photos

Sur mon blog, quand vous laissez un commentaire, celui-ci se retrouvera dans une bulle, un peu comme sur une Bande Dessinée. En plus, si vous avez mis une photo pour votre profil sur blogger, celle-ci s'affichera avec une flechette qui pointe vers votre nom. Au cas où blogger ne dispose d'aucune photo pour votre profil, une image de remplacement apparaîtra.

Cette fonctionnalité était disponible sur modèle Kubrick que j'ai installé sur mon blog Kanga ngaï photo. J'avais aussi voulu l'avoir sur ce blog, c'est ainsi que je suis allé voir dans son code source et ai déniché les éléments nécessaires pour arriver à cette fin.

Voici ce que j'ai fait :

1. Pour avoir de bulle encadrant mes commentaires, j'ai remplacer tout le code css des commentaires par celui-ci :

/* Comments----------------------------------------------- */

#comments { padding-top: 10px; color: #555; font-family: 'Trebuchet MS'; }
#comments h4 { margin: 0px; padding: 8px 0 0 30px; font-size: 20px; color: #555; background: url(http://www.blogblog.com/tictac/bubbles.gif) no-repeat; height: 29px !important; /* for most browsers */ height /**/:37px; /* for IE5/Win */ } #comments ul { margin-left: 0; }
#comments li { background: none; padding-left: 0; } .comment-body { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body p { background:#d0d0d0; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; }
.comment-body-author { background: url(http://chenkaie.googlepages.com/bg_comment.gif) no-repeat 35px 0px; padding-top:1px; }
.comment-body-author p { background:#ccdacc; margin: 5px 0 0px 0; border: 6px solid #e5e5e5; line-height: 1.6em; padding: 7px 7px 7px 13px; } .comment-author { margin: 0px 0px 0px 0px; padding: 0 10px 0 40px; color: #777; font-size: 16px; font-weight:bold; background: url(http://www.blogblog.com/tictac/comment_arrow.gif) no-repeat 20px 7px;}

.comment-footer { padding: 5px 0px 3px 30px;}
.comments-block .comment-body { background: #fff; }.comments-block .comment-footer{ margin: 0 0 0 -10px; }
.comment-title{ margin: 0 0 0 30px;}
.deleted-comment { font-style:italic; color:gray; }
.description { text-align:center; }

.commentphoto {
margin: 25px 0 0 0;
}
* html .commentphoto { /*IE only*/
margin: 30px 0 0 0;
}


.commentphoto img{
float: left;
padding: 2px;
border: 1px solid #333;
margin: -25px 10px 0px 40px;
}
* html .commentphoto img { /*IE only*/
float:right;
margin: -25px 0 0 0;
}

.commentelem {
}

2. Pour afficher les photos à côté des commentaires, j'ai ajouter les codes en bleu ci-dessous juste après le code en rouge :

]]> </b:skin>

<script src='http://chenkaie.googlepages.com/CommentPhoto.js' type='text/javascript'> </script>
<script type='text/javascript'>
// <![CDATA[
addLoadEvent(function(){showCommentPhotos('commentphoto','commentelem',1,'commentelem','http://chenkaie.blogspot.com',
'black','gray');});
//]]>
</script>

3. Pour que ces modifications s'affichent sur les pages avec commentaires, j'ai recherché le bloc de code commençant par :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>

Et se terminant par :

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

4. J'ai sélectionné tout le bloc ci-haut et l'ai remplacé par celui-ci :

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block '>
<b:loop values='data:post.comments' var='comment'>
<div class='commentphoto'/>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<div class='commentelem'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>

<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<br/><data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</div>
</dt>
<!-- kaie added for comment-body-author highlight begenning1-->
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<!-- kaie added for comment-body-author highlight ending1-->
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if> <!-- kaie added for comment-body-author highlight -->
<dd class='comment-footer'>
</dd>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

NB : Si vous aviez installé le formulaire pour les commentaires à la fin des articles, il faudra le réinstaller après l'opération.

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.

Lire la suite