Mettez en valeur le lien vers les commentaires

Nous savons que les commentaires sont une dimension extrêmement importante de l'activité de blogging. L'interaction entre le blogueur et le lecteur est cruciale pour acquérir une audience plus large ; vos lecteurs partagent avec leurs amis qui partageront également avec leurs amis, et ainsi de suite. Nous souhaitons donc vous faire profiter de quelques-uns de nos conseils favoris pour mieux mettre en valeur le lien "Commentaires" dans le pied de vos notes, pour vous aider à construire une communauté au sein de votre blog, entre vous et vos lecteurs.

(Note : les conseils qui suivent requièrent l'usage du CSS Personnalisé, fonctionnalité qui n'est accessible qu'à partir de l'offre Unlimited, et qui se trouve dans la rubrique Habillage de l'administration de votre blog.)

 

Nous avons ci-dessus un exemple générique de pied de note. Il appartient à une note de blog qui n'attend qu'une chose, c'est d'être commentée. Comme vous pouvez le voir, il n'y a pas encore de commentaires, mais nous pouvons améliorer ceci grâce aux conseils qui suivent.

 

Conseil n°1 : mettez ce lien en gras !

Le texte gras peut retenir votre attention. Pour mettre en gras ce lien, éditez le CSS Personnalisé de votre blog, en ajoutant les lignes ci-dessous :

.entry-comments {
    font-weight: bold !important;
}

Enregistrez vos modifications. Vos pieds de notes devraient alors ressembler à l'image suivante.

Conseil n°2 : utilisez des majuscules

L'usage de majuscule en ligne doit se faire de manière modérée, car vous pouvez vite fatiguer vos visiteurs si vous en abusez. Cela étant, si vous faites un usage raisonnable des majuscules, elles peuvent être un bon moyen pour mettre en valeur un élément.

Pour ce faire, ajoutez à votre CSS Personnalisé ces quelques lignes :

.entry-comments {
    text-transform: uppercase !important;
}

N'oubliez pas d'enregistrer pour que vos modifications s'appliquent et observez les changements :

Conseil n°3 : donnez du volume

Pourquoi ne pas aller plus loin et créer un bouton ou un arrière-plan à placer derrière votre lien ? Nous allons découvrir deux méthodes différentes, l'une utilisant un arrière plan avec l'actuel texte personnalisé, l'autre faisant appel à un bouton qui donnera du relief au lien "Commentaires".

La première option est d'ajouter une image d'arrière-plan personnalisée, telle que l'icône suivante 

Pour cela, nous allons avoir besoin d'utiliser du CSS un tout petit peu plus compliqué que celui vu dans les précédents conseils. La première étape est de créer une image qui vous plaise et qui s'intègre bien dans votre design. Vous pouvez sinon, si vous le souhaitez, réutiliser l'image ci-dessus en l'enregistrant sur votre ordinateur (clic droit > Enregistrer l'image sous). Assurez-vous, si vous créez votre propre image, de ne pas la faire trop grosse pour qu'elle s'intègre bien dans le pied de note. Des dimensions allant de 15x15px à 30x30px devraient très bien aller.

Envoyez ensuite votre image dans le Gestionnaire de Fichiers en vous rendant dans Bibliothèque > Gestionnaire de Fichiers. Une fois l'image envoyée, faites un clic droit sur le nom du fichier, puis "Copier l'adresse du lien".

Revenez alors dans Habillage > CSS Personnalisé and ajoutez le CSS suivant :

.entry-comments{
    background: url(http://everything.typepad.com/files/comment-button.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 0px 0px !important;
    display: inline-block !important;
    padding: 2px !important;
}

Enregistrez les modifications.

Pour éviter cette superposition des éléments et obtenir un rendu un petit peu plus gracieux, il nous suffit de demander au texte de disparaître tout en conservant le lien. Nous allons réaliser une petite manipulation en ajoutant quelques lignes au précédent élément CSS, pour obtenir le bloc ci-dessous :

.entry-comments {
    background: url(http://everything.typepad.com/files/comment-button.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 0px -3px !important;
    display: inline-block !important;
    width: 30px !important;
    height: 21px !important;
    text-indent: -1000em;
}

La précédente étape a eu pour conséquence de faire disparaître l'élément texte "Commentaires". Pourquoi ne pas le garder en l'intégrant à un bouton tel que ceux utilisé pour les Favoris, le Reblog ou Twitter ?

C'est que va nous permettre de faire la seconde option, et nous commençons avec l'image ci-dessous :

La largeur importante de cette image est voulue. Elle permettra de s'assurer que le bouton conserve une apparence agréable dans le cas où beaucoup de monde vous laisserait des commentaires.

Là encore, il va vous falloir envoyer cette image dans le gestionnaire de fichier et copier son lien.

Voici le CSS qui permettra d'intégrer cette image en tant que bouton.

.entry-comments {
    background: url(http://everything.typepad.com/files/comment-link.gif) !important;
    background-repeat: no-repeat !important;
    background-position: 0px 0px !important;
    display: inline-block !important;
    border: 1px solid #ddd;
    padding: 2px 6px 2px 28px;
    color: #666 !important;
    font-size: 9px !important;
    font-weight: normal;
    font-style: normal;
    font-family: Verdana, sans-serif;
    text-decoration: none;
    text-transform: none;
    vertical-align: bottom;
    background-color: #ededed;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

Cela représente beaucoup de CSS mais, ca aura un effet presque magique. Enregistrez et observez les changements en rechargeant votre blog.

Observez à quel point votre oeil est attiré par ce bouton. Il ne vous reste désormais plus qu'à mettre en place celui-ci sur votre blog !

Nous espérons que ces astuces vous auront été utiles.