Colorer le Bouton Partager de Blogger

Modifier le Bouton Partager
Blogger utilise la technique du Sprite CSS, pour afficher 5 liens sur 1 image et modifier le fond au survol de la souris.
Le coeur de la méthode consiste à définir la grande image comme image de fond, et à se positionner sur celle-ci à des endroits différents. Le positionnement change grâce à la clause CSS background-position.
L image de départ utilisée par Blogger

Elle comporte 4 rangées de 5 icônes (5 x 22 x 22 pixels). Le bouton standard utilise la première rangée pour les liens, et affiche la dernière ligne (transparente) au survol par la souris.
Le bouton Partager standard

Envoyer par e-mail
BlogThis!Partager sur TwitterPartager sur FacebookPartager sur Google Buzz

Le bouton Partager en couleur
Nous allons afficher la troisième rangée de l'image de base. Au survol (pseudo-classe a:hover), nous allons afficher les icônes de la deuxième rangée (haut du bouton clair).

Envoyer par e-mail
BlogThis!Partager sur TwitterPartager sur FacebookPartager sur Google Buzz

Le CSS à placer dans le Blog, redéfinit la clause background-position. -44px correspond à la rangée 3 (2 x 22) et -22px à la rangée 2 (1 x 22). La mention !important indique que cette clause CSS prime sur toute autre.
/* bouton de partage en couleur */
a.sb-email {background-position: 0px -44px !important;}
a.sb-blog {background-position: -21px -44px !important;}
a.sb-twitter {background-position: -42px -44px !important;}
a.sb-facebook {background-position: -63px -44px !important;}
a.sb-buzz {background-position: -84px -44px !important; width: 22px;}
a.sb-email:hover {background-position: 0px -22px !important;}
a.sb-blog:hover {background-position: -21px -22px !important;}
a.sb-twitter:hover {background-position: -42px -22px !important;}
a.sb-facebook:hover {background-position: -63px -22px !important;}
a.sb-buzz:hover {background-position: -84px -22px !important;}
Le bouton Partager transparent
L'image de base comporte une quatrième rangée transparente. Nous allons l'afficher pour les liens, et au survol, nous ferons apparaître les icônes de la troisième rangée (bas du bouton clair).

Envoyer par e-mailBlogThis!Partager sur TwitterPartager sur FacebookPartager sur Google Buzz

Le CSS à placer dans le Blog, redéfinit la clause background-position. -66px correspond à la rangée 4 (3 x 22) et -44px à la rangée 3 (2 x 22). Il faut ajouter width: 22px pour afficher le bord de l'icône au survol.
/* bouton de partage transparent */
a.sb-email {background-position: 0px -66px !important;}
a.sb-blog {background-position: -21px -66px !important;}
a.sb-twitter {background-position: -42px -66px !important;}
a.sb-facebook {background-position: -63px -66px !important;}
a.sb-buzz {background-position: -84px -66px !important; width: 22px;}
a.sb-email:hover {background-position: 0px -44px !important; width: 22px;}
a.sb-blog:hover {background-position: -21px -44px !important; width: 22px;}
a.sb-twitter:hover {background-position: -42px -44px !important; width: 22px;}
a.sb-facebook:hover {background-position: -63px -44px !important; width: 22px;}
a.sb-buzz:hover {background-position: -84px -44px !important; width: 22px;}
En savoir plus
Sprite CSS pour afficher jusqu'à 50 Profils de Réseaux sociaux.
Le bouton de Partage de Blogger.

   Les Liens du Vin