Puces ou boutons originaux sur votre blog

Publié le par nessa

suite à plusieurs questions de copinautes sur comment installer de jolis boutons
je vous expose ici le procédé

Il faut copier en bas de son css  ceci

(surligner tout en cliquant gauche la souris et descender sur tout le texte à copier en maintenant le clic gauche lacher puis clic droit puis copier puis coller....ça marche ?  non ? il faut faire cette manipulation dès que mon blog s'ouvre ou alors réactualiser avec la touche F5 mon blog, vous avez quelques secondes avant que le clic droit s'installe; à vos marque près feu partez ! hihi)

/* ----------Module Pages-------- */
.pages li {list-style-image:url(url  image);margin:35px;padding:1px; }


/* ----------Catégories---------- */
.categorie li {list-style-image:url(url  image);margin:35px;padding:1px;} 


/* ----------Module Commentaires--------- */
.commentrecent li {list-style-image:url(url  image);margin:35px;padding:1px;}


/* ----------Articles Récents ---------- */
.articlerecent li {list-style-image:url(url  image);margin:35px;padding:1px; }


/* ----------Liens--------- */
.lien li {list-style-image:url(url  image );margin:35px;padding:1px;}


/* ----------Module Profil---------- */
.profil {list-style-image:url(url  image);margin:35px;padding:1px;}


/* ----------Module Présentation---------- */
.presentation {list-style-image:url(url  image);margin:35px;padding:1px }


Vous pouvez mettre des puces identiques pour tous les modules (même url) des puces différentes, ne pas mettre de puces à certains modules (exemple: profil ou présentation)

Après il faut tester sur votre blog; si les puces apparaissent sans être coupées: banco si non il faut bidouiller les px que j'ai mis en vert ....

n'oubliez pas avant toute manipulation de CSS de faire une sauvgarde dans vos brouillons par exemple;
pour une sauvegarde rapide: sélectionner votre CSS (clique droit souris et selectionner) copier puis coller dans un brouillon d'article....

pour trouver des puces soit faire une recherche sur google image soit réduire une belle image, changer la couleur...sur photofiltre ou photoshop (c'est ce que j'ai fait pour mes puces )

voilà j'espère que c'est assez clair, bon css et vive l'upsa et merci à lionne du nord (qui a aussi un très joli blog de cuisine) qui m'a fait un joli fond pour mes commentaires :-)


Réédition : si vos titres de catégories ....  sont sur 2 lignes et que ces lignes se chevauchent suite à l'installation d'une puce vous pouvez rajouter avant la parenthèse   ceci       height:1px
 

Partager cet article

Repost0

Vous aimerez aussi :

…

Commenter cet article

V
Virginie
28/04/2010 20:24
<br /> <br /> On avance mais c'est pas ca.<br /> <br /> <br />  <br /> <br /> <br /> je me demande si c'est pas la dedans <br /> <br /> <br /> a,<br /> .box.presentation a,<br /> .box.presentation li a,<br /> .box .listAll a,<br /> .box.concours a,<br /> .titreArticle,<br /> .infoExtrait,<br /> .titreArticle,<br /> .divTitreArticle h2,<br /> .divPageTitle h2,<br /> .titreExtrait a,<br /> a.linkRecomm,<br /> .presentation h3 a,<br /> .listArticles a,<br /> #miniGlobal h2,<br /> .newWindow a,<br /> .box a,<br /> .box a:hover {<br /> }<br /> <br /> .calendarToday1 {<br /> <br /> }<br /> .calendarToday1, .calendarToday1 a, .calendarToday1 a:hover {<br />     color: #f80a14;<br /> }<br /> <br /> <br /> a:hover,<br /> .box.presentation a:hover,<br /> .box.presentation li a:hover,<br /> .box .listAll a:hover,<br /> .box.concours a:hover,<br /> .titreArticle:hover,<br /> .presentation h3 a:hover,<br /> .listArticles a:hover,<br /> .titreArticle:hover,<br /> .titreExtrait a:hover,<br /> .newWindow a:hover,<br /> a.linkRecomm:hover {<br /> }<br /> <br /> <br /> <br />
Répondre
V
Virginie
28/04/2010 19:30
<br /> <br /> Oula déjà fallait que je trouve la fenetre pour valider les commentaires ^^.<br /> <br /> <br />  <br /> <br /> <br /> Doc voila une autre petite explication http://yfrog.com/g0testsp<br /> <br /> <br />  <br /> <br /> <br /> Merci d'avance<br /> <br /> <br /> <br />
Répondre
V
Virginie
28/04/2010 14:53
<br /> <br /> voila comme je ne savais pas si tu avais compris voila ce que je voudrait ^^<br /> <br /> <br /> http://yfrog.com/j3testggp<br /> <br /> <br /> <br />
Répondre
V
Virginie
28/04/2010 14:31
<br /> <br /> Bonjour !<br /> <br /> <br />  <br /> <br /> <br /> J'adore ton blog, tes p'tites astuces sur le CSS (c'est cro cro dur).<br /> <br /> <br /> J'ai une question pour toi ^^ désolé. Voila Je voudrais car c'est pas encore gagné ^^ cette photo sur chaque categories ou sous categorie de mon blog mais avec c que tu m'a donner j'y arrive pas.<br /> Me comprend de commande ? ou ...?<br /> <br /> <br />  <br /> <br /> <br /> J'espère que ca t'embete as trop.<br /> <br /> <br /> Bonne fin d'après midi.<br /> <br /> <br /> <br />
Répondre
B
Bruno
21/09/2009 11:40
Belle promenade au pays des cabanes enchantées et l'on saute emmerveillés du rêve à la réalité.....
Répondre
E
eva48
18/09/2009 13:51
super ces coeurs et ce curseurmoi j' en aimerai un en coccinellebisouséva
Répondre
☼
☼♥ Lajemy ♥♪
17/09/2009 21:08
Merci pour les instructions chef ! je l'ai fait au début mais je n'ai pas le courage de m'y remettre surtout que j'avais fait des aneries dans le css hihibisous bisous
Répondre
O
ophelia_diaphane
17/09/2009 13:31
NESSA , VOTRE BLOG EST SUPER SYMPA !!!je voulais vous dire que vous avez UN PRIX
Répondre
U
uguetta
17/09/2009 01:35
pareil pour moi pas le temps de cliquer .... j'essaierai tout de même  de tête !!!!
Répondre
P
Pilouchi
16/09/2009 23:43
Le site s'installe et pas le temps de faire le clic droit... tant pis je repasserai copier et taper ... bisous Nessa !
Répondre
M
madine
16/09/2009 23:26
Toi t'es vraiment la reine des gadgets tu devrais être sponsorisée par over, tiens!!!!!
Répondre
P
Pilouchi
16/09/2009 23:21
Merci nessa pour ces infos sur les puces et boutons .. dommage qu'on ne puisse copier les liens clic droit sniff... ! te souhaite une bonne nuit... moi ce soir quelques minutes pour répondre et oups au lit hiiii ! bisous bisousssssss
Répondre
G
Garelle
16/09/2009 23:21
Ah bé, ça me semble bien plus clair comme ça dans ma tête !!!! J'essaie ce week-end !!! mais je passerai quand même à la pharmacie prendre de l'upsa hein, vaut mieux, ça peut servir hein !!!Merci encoreBises
Répondre