Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2010/10/19

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





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).



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: 24px;}

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).





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;}



Correction du style

Dans les 2 cas (bouton en couleur et bouton transparent), ajouter ceci au style du Blog, pour éviter un décalage vers le bas du dernier bouton de la rangée, au survol de la souris :


.post-share-buttons
{
width: 112px !important;
}



Adaptation du style pour les modèles personnalisés

Depuis mars 2011, les modèles personnalisés doivent avoir cette correction pour afficher les boutons partagés : 


.post-share-buttons a
{
position: relative;
display: inline-block;
}



Nouveau bouton de partage (25 mars 2011)

Depuis le 25 mars 2011, Blogger a introduit un nouveau bouton de partage dans la feuille de style associée au Blog.

Version 2 : bouton de partage


Cette image de 120 par 60 pixels comprend le partage sur Orkut. Les petites icônes sont réduites en largeur par rapport à la version 1 (20 x 30 pixels au lieu de 22 x 22 pixels).

Important : Les modifications ci-dessus ne s'appliquent pas à ce nouveau bouton de partage !


En savoir plus

Sprite CSS pour afficher jusqu'à 50 Profils de Réseaux sociaux.

Le bouton de Partage de Blogger.

Enregistrer un commentaire


Rechercher sur le Blog de Prac avec Google CSE