Tous les articles seront prochainement mis à jour.

Comment avoir une barre de partage plus jolie sous Blogger ?

article38

Salut les filles !

Aujourd’hui, je vous retrouve pour un nouveau tutoriel qui vous permettra d’améliorer l’esthétique de votre barre de partage !

Suite à un post sur Hellocoton, certaines d’entre vous m’ont dit qu’elles aimerait modifier la barre de partage de leur blog, car il ne leur plaisait pas du tout !

Si vous ne savez pas de quoi je parle, et bien voilà, la fameuse barre de partage :

barre de partage

Comme vous le voyez, c’est gris, monotone, moche et tout ce que vous voulez. Et je vais vous montrer comment la transformer en ça :

barre de partage 001

En une barre de partage plus colorée, plus grande, plus fun !

Et pour cela, il vous faut le code css suivant :

.share-bar {
margin-top: 0.5em;
vertical-align: bottom;
display: inline-block;
font-size: 0px;
line-height: 0px !important;
}.share-button {
background: url(https://sites.google.com/site/bloggercodebc/home/share_buttons/share_buttons_BC_simple.png) no-repeat left !important;
background-size: auto 192px !important;
width: 32px !important;
height: 32px !important;
overflow: hidden !important;
margin-left: 0px !important;
position: relative !important;
}.share-button-link-text {
text-align: left !important;
}.sb-email { background-position: 0 -32px !important; }
a:hover.sb-email { background-position: 0 -96px !important; }
a:active.sb-email { background-position: 0 -160px !important; }
.sb-blog { background-position: -32px -32px !important; }
a:hover.sb-blog { background-position: -32px -96px !important; }
a:active.sb-blog { background-position: -32px -160px !important; }
.sb-twitter { background-position: -64px -32px !important; }
a:hover.sb-twitter { background-position: -64px -96px !important; }
a:active.sb-twitter { background-position: -64px -160px !important; }
.sb-facebook { background-position: -96px -32px !important; }
a:hover.sb-facebook { background-position: -96px -96px !important; }
a:active.sb-facebook { background-position: -96px -160px !important; }
.sb-pinterest { background-position: -192px -32px !important; }
a:hover.sb-pinterest { background-position: -192px -96px !important; }
a:active.sb-pinterest { background-position: -192px -160px !important; }
.sb-hellocoton { background-position: -224px -32px !important; }
a:hover.sb-hellocoton { background-position: -224px -96px !important; }
a:active.sb-hellocoton { background-position: -224px -160px !important; }

 

Et ce code, vous allez le coller dans Modèle > Personnaliser > Avancé > Ajouter le fichier CSS.

barre de partage 002

Et voici le résultat !

aperçu

Je trouve que ça fait plus joli ! Dîtes-moi ce que vous en pensez ! N’hésitez pas à me demander des tutos via les commentaires ou Hellocoton, j’essaierai de répondre aux questions de tout le monde via des articles (dans la mesure du possible) !

Bonne soirée ! 😀

 

signature

 

37 Comments on Comment avoir une barre de partage plus jolie sous Blogger ?

  1. Gaby
    25 juillet 2014 at 18:17 (3 années ago)

    Merci pour ce tuto ! En effet, ça fait plus joli, je viens de le mettre sur mon blog !
    Bisous, continue comme ça tu es super ♥

    Répondre
    • Mina
      25 juillet 2014 at 18:20 (3 années ago)

      Je t’en prie ! Je viens de faire un tour sur ton blog, c’est beaucoup mieux ! 😀
      Je continuerais aussi longtemps que je pourrais ! Merci ! <3

      Répondre
    • Mina
      25 juillet 2014 at 18:19 (3 années ago)

      Cool ! 😀

      Répondre
  2. Le blog de Vaneta
    25 juillet 2014 at 19:19 (3 années ago)

    Merci pour ce tuto ! J’ai parfaitement réussi à l’installer sur mon blog grâce à tes explications claires !
    Bisous ! 🙂

    Répondre
  3. cotemakeup
    25 juillet 2014 at 19:42 (3 années ago)

    Merci 🙂 je viens le mettre aussi 🙂

    Répondre
  4. Barbara
    25 juillet 2014 at 22:49 (3 années ago)

    bonsoir
    je viens de tester et je me pose les questions suivantes :
    est ce normal que les boutons pinterest, HC n’apparaissent pas alors qu’il y a des lignes dans ton code ?
    et puis-je enlever le bouton twitter sans endommager la barre ?
    encore merci pour tous ces tuto
    Barbara

    Répondre
    • Mina
      25 juillet 2014 at 22:54 (3 années ago)

      Bonsoir ! Non, ce n’est pas normal en effet, j’essaie de trouver une solution, mais je n’arrive pas, du moins, pour Hellocoton ! Parce que pour Pinteret, c’est censé marcher !
      Tu peux enlever la partie twitter sans aucun problème ! 😉
      Je t’en prie ! 😀

      Répondre
  5. jesy
    26 juillet 2014 at 15:09 (3 années ago)

    Merci beaucoup!!! je l’ai mis, simple et rapide haha

    Répondre
  6. Clarart-npa
    29 juillet 2014 at 16:07 (3 années ago)

    Génial!!!=)

    Répondre
  7. Pandrae
    29 juillet 2014 at 18:59 (3 années ago)

    Merci pour cette astuce ! 🙂

    Répondre
  8. AllMyGeekeries
    2 août 2014 at 16:12 (3 années ago)

    Coucou,
    C’est super, merci ! Je l’ai appliqué sur mon blog. 😀
    Mais est-ce qu’il est possible de mettre les boutons plus petits ?

    Répondre
  9. Our Girly Secrets
    7 août 2014 at 12:55 (3 années ago)

    Merci beaucoup, c’est vrai que ça fait vraiment plus beau ! 🙂

    Répondre
  10. Doc Sid
    8 août 2014 at 17:25 (3 années ago)

    C’est vraiment cool, douée en programmation! 🙂

    Répondre
  11. fafa
    25 août 2014 at 12:46 (3 années ago)

    Bon, pour cette fonction, rien ne s’affiche..??? pas grave, je vais essayer d’enlever l’entourage des images. Merci pour ces tutos..

    Répondre
    • Mina
      25 août 2014 at 12:50 (3 années ago)

      Coucou ! Je viens d’aller voir ton blog, et en fait, c’est parce que tu n’as pas de barre de partage ! Du coup, tu ne peux pas l’améliorer ! Pour l’activer, tu dois aller dans Mise en Page, tu cliques sur l’article, et normalement, tu trouveras la barre de partage parmi les différentes fonctions ! 😀

      Répondre
  12. Stefelle
    5 octobre 2014 at 14:44 (3 années ago)

    Tellement plus beau ! Merci pour l’astuce <3

    Répondre
  13. Angie La débrouillarde
    7 octobre 2014 at 15:39 (3 années ago)

    Je te laisse un commentaire ici mais depuis 2 jours je farfouille ton blog afin de créer un beau blog digne de se nom et qui me ressemble.

    MERCI c’est vraiment de super astuce pour apporter notre touche et le rendre « presque » unique notre blogounet!

    Par contre j’ai une petite question à te poser au passage, comment je peut créer une page « contact » original et ne pas l’avoir dans la slidbar.

    Merci d’avance & merci de nous donner tes astuces.

    Bisous

    Répondre
  14. Marie
    2 novembre 2014 at 16:11 (3 années ago)

    Merci!!!! Je découvre ton blog et j’apprends tellement de choses.
    Bisous

    Répondre
  15. Mademoiselle Latinne
    16 novembre 2014 at 11:55 (3 années ago)

    coucou, moi le code ne marche pas. J’ai beau le rentrer dans le fichier CSS mais le bouton appliquer au blog ne veut pas fonctionner (lorsque je clique dessus rien ne se passe ) est-ce que ça t’a fait la même chose ?

    Répondre
  16. Mademoiselle Latinne
    16 novembre 2014 at 12:01 (3 années ago)

    Fausse alerte ! il suffisait d’enlever le code pour hellocoton puisqu’il n’y est pas sur la bare de recherche. Bisoux et merci pour les astuces !

    Répondre
    • Cathy Mumblog
      10 novembre 2015 at 14:34 (2 années ago)

      J’avais le même soucis que toi, ouf, tu m’as permis de comprendre le problème! Merci ^_^

      Répondre
  17. Tomate Joyeuse
    17 novembre 2014 at 08:11 (3 années ago)

    je ne comprends ps, pourquoi avoir mis le CSS de Hellocoton, sans le script. Je vous conseille de mettre le lien de l’article de Soraya qui est plus complet. http://goo.gl/HHKvKW

    Répondre
  18. Orlane
    8 décembre 2014 at 14:53 (3 années ago)

    GENIAL !!! Merci 😉
    J’ai pu centrer mon titre, et ajouter cela grace à toi ! C’est top ! Merci !!

    Répondre
  19. Commedesfolles
    20 décembre 2014 at 21:18 (3 années ago)

    Pourquoi je n’arrive a mettre la barre de partage

    Répondre
  20. Marla Singer
    27 décembre 2014 at 19:54 (3 années ago)

    Merci pour ces conseils simplissimes à mettre en oeuvre ! C’est bien mieux comme ça !

    Répondre
  21. FamilyGlia
    7 janvier 2015 at 16:04 (3 années ago)

    Merci beaucoup pour ce tuto 🙂

    Répondre
  22. Sophia
    8 février 2015 at 18:13 (3 années ago)

    mille merciiiiiiiiiiiiii je viens de le faire mouahhh

    Répondre
  23. Celia
    24 février 2015 at 16:23 (3 années ago)

    Merci beaucoup ca aide pour ses débuts 😉

    Répondre
  24. Axelle
    28 juillet 2015 at 12:53 (2 années ago)

    Coucou, je dois avoir une poisse hors du commun parce que chez moi ça ne marche pas c’est assez décourageant, en tous cas merci quand même, ton blog est super !
    Bisous !

    Répondre
  25. Victoria Ruthven
    4 octobre 2015 at 18:44 (2 années ago)

    Merci pour ce tuto très simple!! en effet, le résultat est bien plus agréable. Au passage, ton blog est super ; )

    Répondre
  26. obsessionclothes
    9 octobre 2015 at 10:02 (2 années ago)

    BOnjour, est-il possible d’avoir ces boutons en noir et de manière ronde au lieu de carré ? 🙂

    Répondre
  27. Cathy Mumblog
    10 novembre 2015 at 14:36 (2 années ago)

    Merci pour ce tuto, super simple et efficace! Parfait!

    Répondre

Laisser un commentaire

© Copyright GirlyBlog 2017 - Tous droits réservés.