Personnaliser un commentaire de blog blogger: les balises autorisées (lien, gras, italique)

Un petit tutoriel très simple, pour grand débutant, sur comment personnaliser les commentaires que l'on laisse sur un blog blogger. (Utilisable sur de nombreuses autres plateformes blog)

(Débutant) Utiliser les balises dans les commentaires de blog blogger pour personnaliser son texte (caractères gras, italique, lien)

La fonction "commentaires" des blogs blogger ne brille pas par sa créativité et ses capacités de personnalisation. Chez certains autres hébergeurs blog, la fenêtre "commentaires" est un véritable mini-traitement de texte: on peut agrémenter ses petits mots d'un smiley, d'images, changer une fonte ou une couleur de texte...
Chez Blogger, rien de tout ça, mais une austérité de rigueur!
Pourtant, souligner un mot par une mise en gras ou en italique peut servir... et c'est d'ailleurs quasiment les seules modifications admises par blogger.

Précision: Réfractaires au HTML, pas de crainte à avoir! Ce qui suit est très simple et sans risque: un jeu d'enfant qui permet d'entrer par la petite porte dans le monde mystérieux des "balises HTML"... et peut-être cela vous donnera-t-il envie de cliquer ensuite sur l'onglet "modifier le code HTML" de vos articles?

Les différentes balises acceptées dans les commentaires d'un blog blogger

Les commentaires blogger n'acceptent que 3 sortes de "balises" (= 3 sortes de modifications):

caractère gras, italique et insertion d'un lien.

C'est d'ailleurs indiqué en petit sous la fenêtre des commentaires, dans cette phrase sans doute hermétique ou invisible pour ceux qui sont mal à l'aise en HTML:

Vous pouvez utiliser des balises HTML, comme <b>, <i>, <a>

Explications à suivre...

Mettre un mot en caractère gras dans un commentaire blogger: la balise <b>

Un mot en caractères gras, c'est un mot encadré par deux balises.
La première balise signifie: "A partir de ce point tout ce qui suit est en gras", et la seconde balise est dite "fermée", puisqu'elle signifie "fin du caractère gras".

b est la lettre (le code) à placer dans ces balises pour qu'un groupe de mots apparaissent en caractères gras dans un commentaire de blog blogger: balise <b>

Exemple d'utilisation de la balise <b> (gras) dans un commentaire blogger:
Dans la phrase:

"Comment écrire une phrase en caractères gras dans un commentaire?..."

... je veux juste placer "une phrase en caractères gras"... en caractères gras, justement!
Il faut donc que j'indique au début et à la fin du groupe de mots cet ordre de la façon suivante:

Comment écrire <b> une phrase en caractères gras </b> dans un commentaire?

La première balise <b> annonce le début de l'action. la seconde balise </b> indique qu'au delà, on revient à l'écriture normale.

Mettre un mot en italiques dans un commentaire blogger: la balise <i>

Comme pour les caractères gras, il faut placer une balise avant et après un mot pour qu'il s'écrive en italiques.

i est la lettre (le code) à placer dans ces balises pour qu'un groupe de mots apparaissent en italique dans un commentaire de blog blogger: balise <i>.

Exemple d'utilisation de la balise <i> (italique) dans un commentaire blogger:
Dans la phrase:

"Comment écrire une phrase en italique dans un commentaire?..."

... je veux juste placer "une phrase en italique "... en italique, justement!
Il faut donc que j'indique au début et à la fin du groupe de mots cet ordre de la façon suivante:

Comment écrire <i> une phrase en italique </i> dans un commentaire?

La première balise <i> annonce le début de l'action. la seconde balise </i> indique qu'au delà, on revient à l'écriture normale.

la balise <a> : comment insérer directement un lien hypertexte dans un commentaire

Il peut être nécessaire d'indiquer dans un commentaire l'adresse d'un autre site. On peut tout simplement recopier intégralement l'adresse dans le commentaire (ce que je fais généralement par paresse). Pour accéder à ce lien, le lecteur devra donc à son tour copier l'adresse, puis la coller dans la barre d'adresses de son navigateur.

Plus pratique pour le lecteur, et un peu moins rapide pour le rédacteur du commentaire: il est tout à fait possible de créer dans le corps de texte du commentaire un lien hypertexte.
C'est là qu'intervient la troisième et dernière balise admise par les commentaires blogger: <a>

Cette opération n'est pas plus risquée que les précédentes, mais un peu plus complexe et longue en raison de la définition d'un lien hypertexte:

Un lien est constitué de deux choses:

• Le groupe de mots que l'on va sélectionner pour qu'il devienne un lien (ex: site photos Balade en Champagne)

• L'adresse que l'on va attribuer à ce groupe de mots (ex: http://www.champagne-balade.fr)

Dans un article, on sélectionne le groupe de mots qui apparait alors surligné, puis on clique sur "liens" et l'on rentre l'adresse du site. Le groupe de mots apparait alors en bleu (généralement) et renvoie au site (ex: site photos Balade en Champagne)

Comment faire la même chose dans un commentaire? Grâce à la balise <a> !

A l'intérieur de la première balise, on indique l'adresse internet du site sous la forme:

<a href="http://www.adresse-du-site.fr">

On rédige ensuite normalement le texte sur lequel va être actif le lien: (exemple:) site photos Balade en Champagne.
On n'oublie pas de "fermer" par la balise </a> après le dernier mot du lien.

Cela donne:

<a href="http://www.adresse-du-site.fr"> site photos Balade en Champagne</a>

... et après publication du commentaire:

site photos Balade en Champagne

Il suffit maintenant de cliquer sur le lien pour accéder au site mentionné.


Remarques:

• Ne pas oublier les guillemets autour de l'adresse du lien.

• Selon le format du formulaire commentaires (en pop up, bas de page...), l'ouverture d'un site à partir d'un commentaire est plus ou moins confortable. Dans ce blog: il s'ouvrirait dans la petite pop up). Solution (pour le visiteur): clic droit avec la souris pour ouvrir le lien dans une nouvelle fenêtre.

• J'ai essayé de faire s'ouvrir un lien dans une nouvelle fenêtre (en utilisant target="_blank") pour palier le problème précédent: impossible dans mes commentaires, blogger refuse le target="_blank" dans le formulaire de commentaire.

• Plutôt que de suivre mon exemple, il est parfois préférable de placer le lien sur l'adresse elle-même plutôt que sur un groupe de mots qui décrit le site:

<a href="http://www.adresse-du-site.fr"> http://www.adresse-du-site.fr</a>

On obtient:

http://www.adresse-du-site.fr (Inutile de cliquer: le lien est fictif)

Double avantage: le lecteur accède directement au site mentionné, et il voit l'adresse et peut la retrouver facilement en cas de dysfonctionnement du lien dans le formulaire des commentaires.

Conseils et remarques en vrac concernant l'introduction de balises et la personnalisation des commentaires dans un blog blogger:

• Lorsque l'on rédige son commentaire, on ne peut pas visualiser ces opérations. (On voit juste nos phrases encadrées de balises.) Les mots en gras, en italique, ou les liens en bleu n'apparaissent qu'une fois le commentaire publié.

• Il ne faut pas oublier la balise qui "ferme": celle qui contient la barre /. En cas d'oubli, blogger refusera de publier votre commentaire et vous écrira un petit mot de remontrance (sous la fenêtre de commentaire) du genre: "balise invalide". (Donc aucun risque de provoquer un quelconque dysfonctionnement lors d'un premier essai: blogger veille...)

• Veiller à ne pas laisser d'espaces inutiles dans les balises, sinon, là encore, blogger ne les reconnaitra pas.
  

• Ne pas oublier qu'il est toujours possible pour l'auteur d'un commentaire de revenir en arrière et de le supprimer en cliquant sur la petite poubelle.

• On peut utiliser ces mêmes balises pour personnaliser le message qui invite les visiteurs à laisser des commentaires. (Onglet Paramètres > onglet Commentaires > Messages du formulaire de commentaire)

personnalisation des commentaires dans un blog blogger: aller plus loin?

J'ai décrit ici l'utilisation des trois seules balises admises dans le formulaire de commentaire d'un blog blogger par défaut.
Le propriétaire d'un blog peut aller plus loin dans la personnalisation de son formulaire de commentaires: changer la couleur de fond de ses propres messages, introduire des smileys... Mais ces personnalisations sont d'un tout autre registre et demandent d'intervenir directement au coeur du blog: dans le code HTML et CSS du modèle proprement dit. Des opérations plus longues et délicates, qui demandent de la rigueur et quelques précautions préalables comme la sauvegarde de son modèle blog.
(Un jour où l'autre, je m'y collerai. En attendant, pour ceux qui souhaitent aller plus loin, des tutos sont disponibles sur différents sites d'aide consacrés aux blogs blogger. J'en ai dressé une liste très sommaire et non exhaustive. Si vous avez d'autres bonnes adresses en stock, n'hésitez pas à les transmettre, je les rajouterai dans ma liste).

Deux ultimes remarques:

• Pour ceux qui souhaitent rédiger dans leur blog des articles tutoriels et sont confrontés à l'impossibilié d'écrire les balises < et > dans leurs articles, voir le billet comment insérer des balises html dans le corps de texte d'un article blogger.

• Attention à ne pas abuser de l'introduction de liens vers son propre blog dans les commentaires: c'est souvent perçu comme du "référencement sauvage" et discourtois sur la toile. (Cf les "commentaires SEO" (= ceux qui visent uniquement à se faire sa propre pub). Personnellement, je supprime systématiquement tous les commentaires du style "Clique sur le lien et viens voir mon blog..." ou pire: "Je vends des baskets de marque pas chères"...)

___________________________________________________________________

Article à suivre:

Dans la lignée de ce billet, le prochain tutoriel sera consacré à la création d'info-bulles (<- passez la souris pour lire l'info-bulle): pas beaucoup plus compliqué à mettre en œuvre que l'utilisation des balises dans les commentaires.

___________________________________________________________________
Articles liés: Ces articles peuvent vous intéresser:

• Copier un texte déjà mis en forme dans un éditeur blog sans bug
• Comment insérer des images de grande taille dans un article blogger
• De nouvelles couleurs de police pour votre article