Comment faire apparaitre des puces graphiques dans un article de son blog
Une demande expresse de notre amie Marie Noël à propos du paramétrage des puces dans un article de blog me donne l’idée de faire cet article.
En effet, hier je vous expliquais qu’il était vraiment très bénéfique de mettre des puces promesses graphiques en forme de triangle ou de flèches dans un article de blog (ou sur une page de vente) pour focaliser l’attention sur des éléments importants.
Oui mais voilà.
Comment faire en pratique ?
Voici une procédure en 3 étapes :
Etape 1 : Trouver le fichier CSS de votre thème
Il s’agit du fichier qui donne son aspect visuel à votre blog.
Vous pouvez généralement y accéder en passant par le tableau de bord de votre blog.
Si vous êtes sous Wordpress, alors cliquez sur “Apparence” puis “Editeur”.
Choisissez le thème de votre blog dans le menu déroulant si vous en avez plusieurs.
En général, c’est la feuille de style qui s’affiche en premier :
Etape 2 : Choisissez l’image de la puce que vous voulez
Vous avez le choix parmi 2400 exemplaires de puces graphiques. Vous pouvez aussi la créer.
Une fois que vous l’avez choisie, allez la glisser dans le répertoire “images” de votre thème sur le serveur d’hébergement de votre blog, en utilisant par exemple le logiciel FileZilla.
Par exemple :
Etape 3 : Modifiez le code de vos puces dans le fichier CSS
Arrive la partie la plus délicate.
Repérez dans votre fichier de style, la balise “li”. Si elle ne s’y trouve pas, créez là en marquant :
li { }
Entre les deux accolades, voici par exemple ce que vous pourriez y mettre :
Dans l’exemple ci-dessus, vous voyez ce qui produit ça sur ce blog :
- list-style-type: none; (1) enlève le point qu’on voit généralement devant les éléments une liste
- background: url(images/puce2.jpg); (2) rajoute l’image que vous avez choisie en arrière plan de votre texte. C’est la puce graphique.
- background-repeat: no-repeat; (3) ne la fait apparaitre qu’une fois, sinon, elle se répèterait derrière tout le contenu de liste.
- padding-left: 35px; (4) détermine l’espace qu’il y a entre le bout droit de votre puce et le début du texte.
- margin-top: 10px; (5) détermine l’espace qu’il y a entre deux lignes de la liste
- margin-left: 15px; (6) détermine la distance entre le bord gauche de l’article et le bout gauche de votre puce
Pour les éléments 4, 5 et 6, voici un petit schéma pour que vous compreniez mieux :
Une fois que vous avez modifié tout ça, cliquez bien sur le bon bouton pour enregistrer les modifications.
Normalement, les puces de vos articles sont devenues graphiques.
Essayez, et dites-moi si vous vous en sortez.
