samedi 30 juillet 2011

Colorer les boutons de partage officiels de Blogger




Les boutons de partage officiels de Blogger sont grisés par défaut, la coloration de chaque bouton ne s’effectue qu’au passage du curseur sur lui. Si vous ne voulez plus de cet effet et que vous préférez des boutons colorés tout le temps, ce tutoriel est fait pour vous !

Attention : Dans ce tutoriel, je suppose que vous avez déjà suivi le tutoriel “Ajouter les boutons de partage officiels de Blogger” et le tutoriel “Ajouter le bouton Orkut à la liste des boutons de partage officiels de Blogger”. Si ce n’est pas le cas, les modifications expliquées ci-dessous ne vont pas marcher ! Je vous recommande aussi ce tutoriel sur l'ajout du bouton +1 de Google à votre blog

Passons aux choses sérieuses :
- Allez sur Présentation > Modifier le code HTML
- Cochez “Développer des modèles de gadgets”
- Juste avant la balise </head>, ajoutez le code suivant :
<style type='text/css'>
<!-- Boutons de partage colorés -->
.post-share-buttons
{
width: 140px !important;
position: relative;
display: inline-block;
}
a.sb-email {background-position: 0px -40px !important;}
a.sb-blog {background-position: -20px -40px !important;}
a.sb-twitter {background-position: -40px -40px !important;}
a.sb-facebook {background-position: -60px -40px !important;}
a.sb-orkut {background-position: -80px -40px !important;}
a.sb-buzz {background-position: -100px -40px !important; width: 24px;}
a.sb-email:hover {background-position: 0px -20px !important;}
a.sb-blog:hover {background-position: -20px -20px !important;}
a.sb-twitter:hover {background-position: -40px -20px !important;}
a.sb-facebook:hover {background-position: -60px -20px !important;}
a.sb-orkut:hover {background-position: -80px -20px !important;}
a.sb-buzz:hover {background-position: -100px -20px !important;}
</style>

Partagez cet article sur vos réseaux sociaux :



Recevez les nouveautés par email

4 commentaires:

les ParisDLD a dit…

ça marche Impec ! merci

Lena a dit…

Bonjour, est-ce normal qu'après avoir modifier les boutons (donc pour ajouter la couleur), les boutons ne sont plus aligner au même endroit ?

Nawras a dit…

Bonjour Lena, j'ai spécifié que ce code ne marche que si tous les boutons sont là (y compris le bouton orkut) ..

Rita Lubitsch a dit…

ça marche, merci.

Sélectionnez les signes à côté du smiley à insérer dans votre commentaire

:)) ;)) ;;) :X :(( =(( :-o :-* :| :)] :-t
b-( :-L :-/ o_O :D ;) :p :) :( 8-) ^^

Enregistrer un commentaire

Related Posts with Thumbnails