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.

2010/10/17

Profils des Réseaux Sociaux avec Sprite CSS

Profils des Réseaux Sociaux avec Sprite CSS

Sprite CSS est une technique permettant d'utiliser une seule image pour afficher plusieurs icones ou effets graphiques


Sprite CSS : Afficher vos Profils dans 50 Réseaux Sociaux

La méthode décrite ici est appelée Sprite CSS, par analogie avec la méthode utilisée par les premiers jeux vidéos (Sprite en anglais : le lutin, le farfadet). Ces jeux affichaient un personnage animé à partir de pixels pris sur une seule image, par souci d'économie de ressources.

La base de cet article est un Plugin pour Wordpress, Cute Profiles : Free WordPress Plugin To Show Vertically Floating Social Profiles.

Le CSS background-position

La clause CSS background-image permet de définir l'image de fonds d'un bloc. La position de cette image est fixée par background-position. Nous allons utiliser 2 coordonnées, l'axe horizontal et l'axe vertical en pixels pour afficher une partie de l'image de fonds.
Partons d'une image de 120 x 90 pixels, et divisons cette image en 4 cadrans (haut / bas et gauche / droite).

Image de fonds - 120 x 90


Un lien avec une image

En utilisant la clause background-image nous pouvons créer un lien sur une image. Le tag a (ancre) doit normalement contenir le texte du lien. Nous supprimons l'affichage du lien par la clause CSS display: none;


div.test1
{
border: 0px;
margin: 0px;
padding: 0px;
}

div.test1 a
{
display: inline-block;
width: 60px;
height: 45px;
padding: 0px;
margin: 0px 0px 4px;

background-image: url(http://www.liens-du-vin.ch/ascreen.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;

}

div.test1 a.haut_gauche
{
background-position: 0px 0px; /* CADRAN HAUT GAUCHE */
}

div.test1 a.haut_droite
{
background-position: -60px 0px; /* CADRAN HAUT DROITE */
}

div.test1 a.bas_gauche
{
background-position: 0px -45px; /* CADRAN BAS GAUCHE */
}

div.test1 a.bas_droite
{
background-position: -60px -45px; /* CADRAN BAS DROITE */
}

div.test1 a span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}



Le code HTML, place les liens sur les 4 cadrans, dans un bloc div :


<div class="test1">

<a class="haut_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Gauche"><span>Liens Du Vin<</a>
<a class="haut_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Haut Droite"><span>Liens Du Vin</span></a>
<a class="bas_gauche" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Gauche"><span>Liens Du Vin</span></a>
<a class="bas_droite" href="http://www.liens-du-vin.ch" target="_blank" title="Liens Du Vin - Bas Droite"><span>Liens Du Vin</span></a>

</div>



Ce qui donne le résultat suivant :


Haut Gauche (0 0)Haut Droite (-60 0)
Liens Du VinLiens Du Vin
Bas Gauche (0 -45)Bas Droite (-60 -45)
Liens Du VinLiens Du Vin



Changer le fonds au survol

Nous allons utiliser une peudo-classe CSS a:hover pour modifier le fonds du lien au survol de celui-ci.
Affichons le cadran Haut Gauche sur le lien, et affichons le cadran Bas Droite lorsque le curseur survole le lien. Il suffit de définir la clause CSS hover (à placer après la clause a:link) :


div.test1 a.haut_gauche:hover
{
background-position: -60px -45px;
}



En pratique, l'image change pour le cadran Bas Droite au survol par la souris :



La Mise en oeuvre avec les icônes de Profil

L'image *.png des Profils des Réseaux Sociaux (50 icônes) ainsi que la feuille de style complète pour toutes les icônes peuvent être obtenues à l'adresse du Plugin Wordpress citée plus haut.

L'image de base comprend 50 icônes de 32 pixels, sur 2 rangées. La première rangée est l'image du lien, la deuxième comporte l'image à afficher au survol du lien.

Profils sur 50 Réseaux sociaux


Les coordonnées de background-position pour le lien

Par exemple, nous voulons afficher comme lien, l'icône no 3 de la première rangée (facebook). Le CSS du lien sera :


div.profil_sprite a.facebook
{
background-position: -64px 0px;
}



En généralisant, le lien pour l'icône n, -32 * (n - 1). Par exemple, l'icône YouTube (no 9, donc -32 * (9-1) = -256) :



div.profil_sprite a.youtube
{
background-position: -256px 0px; /* ICONE 9 : -32 * (9 - 1) */
}



Les coordonnées de background-position pour le survol de la souris

Nous devons changer la coordonnée y de background-position, en nous déplaçant de 32px vers le bas. Pour Facebook (icône no3) :


div.profil_sprite a.profil_facebook:hover
{
background-position: -64px -32px;
}



Et pour YouTube (icône no 9) :


div.profil_sprite a.youtube:hover
{
background-position: -256px -32px;
}



Un exemple complet avec mes profils

Le CSS :


div.profil_sprite /* LE BLOC DIV CONTENANT LES LIENS */
{
text-align: center;
border: 0px;
margin: 0px;
padding: 0px;
}

div.profil_sprite a /* LE LIEN DANS LE BLOC DIV */
{
width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}

/* LES ICONES QUI DOIVENT FIGURER */

div.profil_sprite a.profil_twitter
{
background-position: -32px 0px; /* ICONE NO 2 */
}
div.profil_sprite a.profil_twitter:hover
{
background-position: -32px -32px; /* ICONE NO 2 */
}
...
...
div.profil_sprite a.profil_google
{
background-position: -160px 0px; /* ICONE no 6 */
}
div.profil_sprite a.profil_google:hover
{
background-position: -160px -32px; /* ICONE no 6 */
}

.profil_sprite span
{
display: none; /* SUPPRIMER LE TEXTE DU LIEN */
}



La barre horizontale de mes Profils :



Le html de l'exemple :


<div class="profil_sprite">
<a href="URL profil Google" title="Profil Google" class="profil_google"><span>Profil Google</span></a>
...
</div>



Afficher la barre des profils verticalement

Il suffit de définir les liens comme étant display: block;


div.profil_sprite_v a
{

display: block;

width: 32px;
height: 32px;
padding: 0px;
margin: 0px 0px 4px;
background-image: url(http://www.liens-du-vin.ch/_pic062/profiles32.png);
background-repeat: no-repeat;
background-position: 0px 0px;
}





Plus d'informations

Une introduction aux Sprite CSS, par alsacréations.

Jouer avec l'opacité et la transparence pour ses images.

Utiliser les filtres d'opacité pour ses images.

Colorer le Bouton Partager de Blogger.


Rechercher sur le Blog de Prac avec Google CSE