Styler les boutons de partage

Je vous livre dans ce tutoriel des codes à copier-coller qui vous permettront de customiser les boutons de partage sur les réseaux sociaux, j'entends par là : de modifier leur couleur, de les aligner à droite plutôt qu'à gauche et/ou de leur appliquer un sympathique effet "rollover" au passage de la souris. Rien d'exaltant donc, mais de quoi donner une touche personnelle à ces boutons de partage...

 

Où insérer les codes fournis ?

Tout se passe dans la fenêtre de saisie accessible dans Paramètres > Modifier le head :

 

Capture de Paramètres > Modifier le head
Paramètres > Modifier le head

C'est dans cette fenêtre de saisie que vous allez coller les codes fournis.

Flèche vers le haut

Aligner les boutons à droite

Pour commencer, voyons comment aligner les boutons de partage à droite plutôt qu'à gauche.

Aligner tous les types de boutons

Pour aligner tous les boutons de partage à droite, copiez-collez ce code unique :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-element {
display: block;
float: right !important;
}

/*]]>*/
</style>

Aligner certains types de boutons seulement

Les petits boutons

Pour aligner à droite uniquement les petits boutons :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-16 {
display: block;
float: right !important;
}

/*]]>*/
</style>

Les moyens boutons

Pour aligner à droite uniquement les moyens boutons :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-32 {
display: block;
float: right !important;
}

/*]]>*/
</style>

Les grands boutons

Pour aligner à droite uniquement les grands boutons :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-64 {
display: block;
float: right !important;
}

/*]]>*/
</style>
Flèche vers le haut

Changer la couleur des boutons : 15 modèles au choix

Avec les codes ci-dessous, vous allez pouvoir modifier la couleur des boutons de partage de votre site, pour les accorder à votre design par exemple.

Avertissement liminaire

Par flemme ou manque de temps - ou les deux - je ne propose pour le moment de boutons colorés alternatifs que pour les boutons de taille moyenne (32 px). Les boutons de petite taille (16px) et de très grande taille (64px) ne seront donc pas modifiés : ils resteront en noir et blanc.

Installation dans Jimdo

1. Ajoutez un élément + Partager là où vous souhaitez qu'apparaissent les boutons de partage :

L'élément Partager

2. Sélectionnez obligatoirement les boutons de 32 pixels en noir et blanc :

Sélection des boutons à styler

3. Sélectionnez les boutons que vous souhaitez afficher en cochant les cases :

Sélection des boutons à afficher

Choix du coloris

J'ai préparé 15 modèles de boutons : à vous de faire votre marché ! Le code à copier-coller est donné sous chaque jeu de boutons.

Modèle 1 : noir profond

Modèle 1 : noir profond
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-black.png) !important;}

/*]]>*/
</style>

Modèle 2 : bleu

Modèle 2 : bleu
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-bleu.png) !important;}

/*]]>*/
</style>

Modèle 3 : bleu ciel

Modèle 3 : bleu ciel
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-bleuclair.png) !important;}

/*]]>*/
</style>

Modèle 4 : lavande

Modèle 4 : lavande
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-bleufonce.png) !important;}

/*]]>*/
</style>

Modèle 5 : lie de vin

Modèle 5 : lie de vin
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-bordeau.png) !important;}

/*]]>*/
</style>

Modèle 6 : brique

Modèle 6 : brique
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-brique.png) !important;}

/*]]>*/
</style>

Modèle 7 : fushia

Modèle 7 : fushia
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-fushia.png) !important;}

/*]]>*/
</style>

Modèle 8 : noir en négatif inversé

Modèle 8 : noir en négatif inversé
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-inverse.png) !important;}

/*]]>*/
</style>

Modèle 9 : orange

Modèle 9 : orange
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-orange.png) !important;}

/*]]>*/
</style>

Modèle 10 : rouge

Modèle 10 : rouge
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-red.png) !important;}

/*]]>*/
</style>

Modèle 11 : sépia

Modèle 11: sepia
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-sepia.png) !important;}

/*]]>*/
</style>

Modèle 12 : sombre

Modèle 12 : sombre
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-sombre.png) !important;}

/*]]>*/
</style>

Modèle 13 : vert

Modèle 13 : vert
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-vert.png) !important;}

/*]]>*/
</style>

Modèle 14 : vert alternatif

Modèle 14 : vert alternatif
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-vertclair.png) !important;}

/*]]>*/
</style>

Modèle 15 : violet

Modèle 15 : violet
<style type="text/css">
/*<![CDATA[*/

/* Personnalisation des boutons de partage (32px noir et blanc seulement) */

div.cc-sharebuttons-size-32 div.cc-sharebuttons-style-2 a {background-image: url(http://sd-1.archive-host.com/membres/images/3347790973941088/icons32-violet.png) !important;}

/*]]>*/
</style>

Aperçu du résultat

Vous pouvez voir un aperçu du résultat sur ce site de démonstration :

Aperçu du résultat
Flèche vers le haut

Ajouter un effet "rollover" sur les boutons

Voyons maintenant comment ajouter un petit effet "rollover" (icônes mises en transparence plus ou moins accentuée au passage de la souris) sur ces mêmes boutons.

Ajouter l'effet à tous les boutons

Pour obtenir l'effet "rollover" sur tous les boutons, copiez-collez ce code unique :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-element a:hover {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

/*]]>*/
</style>

Ajouter l'effet à certains types de boutons seulement

Les petits boutons

Pour appliquer l'effet "rollover" uniquement sur les petits boutons :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-16 a:hover {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

/*]]>*/
</style>

Les moyens boutons

Pour appliquer l'effet "rollover" uniquement sur les moyens boutons :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-32 a:hover {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

/*]]>*/
</style>

Les grands boutons

Pour appliquer l'effet "rollover" uniquement sur les grands boutons :

... copiez-collez ce code :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-64 a:hover {
  filter: alpha(opacity=50); /* internet explorer */
  -khtml-opacity: 0.5;      /* khtml, old safari */
  -moz-opacity: 0.5;       /* mozilla, netscape */
  opacity: 0.5;           /* fx, safari, opera */
}

/*]]>*/
</style>
Flèche vers le haut

Moduler l'effet de transparence du "rollover"

Pour finir, nous allons voir comment moduler l'effet produit par le "rollover".

 

Atténuer l'effet de transparence

Pour atténuer l'effet de transparence appliqué aux boutons de partage, il suffit d'augmenter la valeur de l'opacité qui apparaît en vert dans les codes fournis ci-dessus. Par défaut, j'ai réglé l'opacité à 0,5 (ou 50 pour IE). En passant la valeur à 0,8 (ou 80 pour IE), vous réduirez l'effet de transparence appliqué aux icônes lors du passage de la souris.

 

Voici un exemple de code qui atténue la transparence seulement sur les grands boutons :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-64 a:hover {
  filter: alpha(opacity=80); /* internet explorer */
  -khtml-opacity: 0.8;      /* khtml, old safari */
  -moz-opacity: 0.8;       /* mozilla, netscape */
  opacity: 0.8;           /* fx, safari, opera */
}

/*]]>*/
</style>

Accentuer l'effet de transparence

Pour accentuer l'effet de transparence appliqué aux boutons de partage, il suffit de baisser la valeur de l'opacité qui apparaît en vert dans les codes fournis ci-dessus. Par défaut, j'ai réglé l'opacité à 0,5 (ou 50 pour IE). En passant la valeur à 0,3 (ou 30 pour IE), vous augmenterez l'effet de transparence appliqué aux icônes lors du passage de la souris.

 

Voici un exemple de code qui augmente la transparence uniquement sur les petits boutons :

<style type="text/css">
/*<![CDATA[*/

div.cc-sharebuttons-size-16 a:hover {
  filter: alpha(opacity=30); /* internet explorer */
  -khtml-opacity: 0.3;      /* khtml, old safari */
  -moz-opacity: 0.3;       /* mozilla, netscape */
  opacity: 0.3;           /* fx, safari, opera */
}

/*]]>*/
</style>

Autres tutoriels sur le sujet (en allemand)

Voici deux autres tutoriels qui modifient l'aspect des boutons de partage. Ils sont en allemand, mais il est très facile de repérer les codes à copier-coller :

Ces deux tutoriels vous permettent de remplacer les icônes de partage fournies par défaut par d'autres, d'un style graphique différent. Notez que seules les icônes des sites de partage les plus populaires (Facebook, Twitter, mail... ) sont présentes dans les sets de boutons ; il vous faudra donc renoncer à activer les icônes des autres sites de partage.

Et voilà, c'est fini ! Have fun !

A vos plumes !

Écrire commentaire

Commentaires : 8
  • #1

    villy-en-auxois (dimanche, 12 août 2012 13:06)

    Merci beaucoup pour tous ces codes !!!

  • #2

    Sakina Magazine (samedi, 29 septembre 2012 14:55)

    Merci :)

  • #3

    C.M.J. 39130 (samedi, 01 décembre 2012 14:37)

    Merci pour tout ces codes !!!

  • #4

    poppyblossom (mardi, 05 février 2013 21:58)

    J'ai essayé de changer la couleur mais impossible, ça ne semble pas fonctionner !

  • #5

    Isabelle (mercredi, 06 février 2013 13:40)

    Bonjour ! Je viens de re-tester sur mon site de test et cela fonctionne. Recommencez en suivant bien les étapes pas à pas et je suis sûre que cela fonctionnera pour vous aussi ;)

  • #6

    Siméon Songo (dimanche, 24 février 2013 00:39)

    Bonjour, je ne comprends pas bien, où faut-il coller le code? J'ai essayé de le coller sur la place des widgets ça ne marche pas.

  • #7

    favoris (dimanche, 24 février 2013 13:25)

    @Siméon : reportez-vous à cette étape du tutoriel : http://realia.jimdo.com/modifier-le-design/styler-les-boutons-de-partage/#ou. C'est là que vous collez les codes.

  • #8

    mlpresse (mercredi, 10 avril 2013 20:45)

    Super, merci beaucoup !!

Ruban