L'Auteur du site

Passionné par le web, je suis un JimdoFriend et mets à disposition des tutoriels et astuces pour Jimdo gratuitement.

Rechercher

Sur Facebook

Réseaux sociaux

Retrouvez moi sur Twitter et Google+ également.

Newsletter

[Maj 2016] Des boutons de partage qui se donnent à fond !

24 avril 2016 : Le tutoriel a été mis à la jour (les codes ont été changés).
27 août 2014 : Le tutoriel a été adapté à la nouvelle version des boutons de partage Jimdo.
25 juin 2015 : code flat design (fini le contour et l'ombre, place à la modernité)

Ce petit tutoriel fera tourner vos boutons de partage au survol de la souris ;) Vos boutons seront vraiment stylés !

Aperçu

Le code (version flat design)

Allez dans "Paramètres" (dans la barre du panneau d'administration), puis dans "Modifier le head" et insérez le code suivant :

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

/* Styler les boutons de partage code zetuto.com */

div.cc-sharebuttons-size-64 a, div.cc-sharebuttons-size-32 a, div.cc-sharebuttons-size-16 a {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
div.cc-sharebuttons-size-64 a:hover, div.cc-sharebuttons-size-32 a:hover, div.cc-sharebuttons-size-16 a:hover {
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: 0.8s ease-in-out !important;
-moz-transition: 0.8s ease-in-out !important;
-o-transition: 0.8s ease-in-out !important;
-ms-transition: 0.8s ease-in-out !important;
transition: 0.8s ease-in-out !important;
-webkit-transform: rotate(360deg) !important;
-moz-transform: rotate(360deg) !important;
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg) !important;
transform: rotate(360deg) !important;
}

/*]]>*/
</style>

Voici d'autres exemples


Le code (version avec ombre et contour)

Ceci est le code avec le rajout de contours et des ombres.

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

/* Styler les boutons de partage code zetuto.com */

div.cc-sharebuttons-size-64 a, div.cc-sharebuttons-size-32 a, div.cc-sharebuttons-size-16 a {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 2px 2px 2px #ccc;
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
}
div.cc-sharebuttons-size-64 a:hover, div.cc-sharebuttons-size-32 a:hover, div.cc-sharebuttons-size-16 a:hover {
filter: alpha(opacity=100);
-khtml-opacity: 1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: 0.8s ease-in-out !important;
-moz-transition: 0.8s ease-in-out !important;
-o-transition: 0.8s ease-in-out !important;
-ms-transition: 0.8s ease-in-out !important;
transition: 0.8s ease-in-out !important;
-webkit-transform: rotate(360deg) !important;
-moz-transform: rotate(360deg) !important;
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg) !important;
transform: rotate(360deg) !important;
}

/*]]>*/
</style>

Comment insérer le code précédent ?

Écrire commentaire

Commentaires : 12
  • #1

    tonycraft-anthony (lundi, 26 août 2013 10:12)

    Comment on peut enlever un truc qu'on à inséré dans "modifier le head"?
    Prévenez-moi sur www.tonycraft-anthony.jimdo.com/contact
    Cordialement,
    TonyCraft Anthony

  • #2

    Ze Tuto (lundi, 26 août 2013 12:37)

    Bonjour @TonyCraft Anthony,
    Pour enlever un code que vous avez inséré dans "Modifier le head", il vous suffit d'aller dans "Modifier le head", de repérer le code en question et de l'enlever, puis cliquez sur "Enregistrer".

    Cordialement

  • #3

    tonycraft-anthony (lundi, 26 août 2013 18:09)

    J'ai d'autre questions...
    Comment tu à fait pour mettre les deux boutons qui son sur le coté gauche de ton site?
    Et aussi comment tu fait pour quand on appuis sur un bouton, du texte (ou des images) apparaisses?

    PS: Désolé pour les fautes...
    Préviens moi sur www.tonycraft-anthony.jimdo.com/contact (Cette fois il fonctionne...)

  • #4

    les-ecuries-des-sablons (mercredi, 11 septembre 2013 18:10)

    Bonjour comment cela se fait que ces codes ne fonctionnent pas chez moi ? :(
    A quel endroit met t'n le lien que redirige l'icone?

    Merci d'avance

  • #5

    Ze Tuto (vendredi, 13 septembre 2013 21:21)

    Bonsoir @les-ecuries-des-sablons,
    Il faut insérer les codes dans "Modifier le head", puis il faut ajouter un élément boutons de partage.

    Cordialement

  • #6

    atoutcanin (mercredi, 09 juillet 2014 22:36)

    bonjour à tous,
    super tuto, puis-je un peut compliquer la chose car j'ai fais les derniers changement et dans mes recherches je suis tombé sur un site ou les icônes me plaisent plus serais-il possible d'avoir le même changement avec d'autres icônes.
    je vous passe le lien de se que j'ai vu les icônes de partages sont en haut a gauche mais elles n'y sont pas toutes mais je vais voir si je les trouvent:
    http://forum.forumactif.com/t94973-listing-des-trucs-astuces

    merci et @ bientôt

  • #7

    Ze Tuto (jeudi, 10 juillet 2014 11:06)

    Bonjour Vanessa,

    Attention à ce que vous mettez dans le head, j'ai vu quelques trucs bizarres, du style "<center>div.cc-sharebuttons-size-64 a" et "transform: rotate(360deg) !important;<center>" (ce qui est en gras = à enlever). Et pour finir, pourquoi avoir modifié le curseur de la souris en mettant l'image des boutons de partage Jimdo en tant que url ???

    Ah et aussi, durant ma visite sur votre site j'ai vu que des fenêtres popup s'ouvraient, vu les widgets que vous avez dans la sidebar, ce ne serait pas étonnant que cela viennent d'un de ces widgets (à moins que ce soit vous qui en ait mis volontairement).

    Cordialement

    Florian

  • #8

    clubminceur (mercredi, 13 août 2014 02:16)

    merci
    c'est super joli ces petits boutons

  • #9

    calinsgratuitsgrenoble (jeudi, 21 août 2014 22:23)

    oui les boutons qui tournent c'est top

    faites vous des câlins, c'est gratuit ! ♥

  • #10

    PortraitPeinture (samedi, 30 août 2014 20:18)

    Super ce tuto :) merci

  • #11

    www.siteweb2pme.fr (mardi, 06 janvier 2015 21:58)

    Les boutons qui tournent == TOP ! merci a bientôt

  • #12

    trustcoaching (lundi, 23 mars 2015 19:13)

    Merci pour ce partage clair et précis.