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
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
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
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...)
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
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
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
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
clubminceur (mercredi, 13 août 2014 02:16)
merci
c'est super joli ces petits boutons
calinsgratuitsgrenoble (jeudi, 21 août 2014 22:23)
oui les boutons qui tournent c'est top
faites vous des câlins, c'est gratuit ! ♥
PortraitPeinture (samedi, 30 août 2014 20:18)
Super ce tuto :) merci
www.siteweb2pme.fr (mardi, 06 janvier 2015 21:58)
Les boutons qui tournent == TOP ! merci a bientôt
trustcoaching (lundi, 23 mars 2015 19:13)
Merci pour ce partage clair et précis.