lundi 14 avril 2014

★ Comment intégrer des icônes pour réseaux sociaux sur son blog ? ★

En ce moment vous avez du remarquer, je suis entrain de mettre en place pas mal de choses sur mon blog.
 J'ai suivi une superbe formation online dont je vous parlerais dans un prochain post et cela m'a permis de me poser les bonnes questions pour mon blog
Alors prochainement, je vais vous faire 2 ou 3 articles sur quelques petites choses pratiques pour le blog

Aujourd'hui nous allons parler boutons !!!!
Vu que je me suis un peu embêtée à trouver comment installer des boutons sur mon blog pour les réseaux sociaux, je me suis dit que ce petit tuto devrait peut être en intéresser certains ...

Hé bien oui, comment installer des boutons ou des icônes sous blogger ?
Vous savez ceux qu'on voit sur le côté d'un blog où il n'y a plus qu'à cliquer dessus comme ceux là par exemple :




Images empruntées sur la boutique de Aurélie Talbot ici 

Non non je ne connais pas cette personne mais j'ai craqué sur ses jolies boutons ;-)

Je pensais que cela serait facile mais ... je ne trouvais pas quelque chose qui me plaisait alors voilà comment j'ai procédé pour installer les miens.

1ère étape : Tout d'abord il vous faut de jolis boutons. 

- Soit vous les faites vous même si vous êtes un ou une pro de photoshop ou autre logiciel de ce type 
- Soit vous en achetez dans une boutique comme celle de Aurélie Talbot  dont je viens de vous parler
- Ou bien vous en trouvez en free sur un blog qui a la gentillesse de vous faire un cadeau !
On en trouve sur des blogs américains, si vous voulez un ou deux adresses car vous ne trouvez pas, laissez moi un commentaire ! Ou si vous connaissez quelques adresses je suis preneuse ;-)

2ème étape : Écrire un nouvel article sous blogger 

Vous ouvrez une nouvelle page et vous allez insérer chaque icône ou bouton dans votre texte de ce nouvel article comme vous le faites habituellement pour insérer une photo.
Puis vous associer à chaque image un lien ou un email qui correspond à chaque image avec le bouton Associer. J'espère que je suis claire dans mes explications !

3ème étape : Copier le code html

Toujours sur la même page où vous rédigez votre article, vous allez cliquer sur le bouton en haut à gauche HTML juste à côté de celui Rédiger. Hé bien là miracle le code apparaît !!!
Vous sélectionnez tout le code et vous le copiez. Enregistrer en brouillon votre article au cas ou ...

4ème étape : Coller le code dans un gadget

Pour cela, il faut aller sur la mise en page puis on clique sur ajouter un gadget et on choisit
celui-ci html/javascript

HTML/JavaScriptHTML/JavaScriptAjouter
Ajouter une fonctionnalité tierce ou un autre code à votre blog.
Par Blogger 

Et vous collez votre code, donnez un titre (j'ai mis un espace) et vous enregistrez et c'est fini !!!!
Enregistrez la mise en page et vous pouvez admirer vos beaux boutons

Edit du 11/11/2014 :
Voici un lien avec des boutons gratuits ;-) à télécharger
http://byourownblog.blogspot.fr/2013/05/blog-design-25-free-social-media-icon.html
Rendez-vous sur Hellocoton !

27 commentaires :

  1. merci merci beaucoup c'est sympa ..bizzz véro

    RépondreSupprimer
  2. Merci beaucoup pour cet article :)
    Est ce que tu aurais justement 2/3 adresses où trouver des boutons gratuits?
    Jte remercie par avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Paulette
      je rajoute un lien dans mon post où tu trouveras pleins de liens (c'est en anglais !)
      Contente de t'avoir aider ;-)
      A bientôt

      Supprimer
  3. Un grand merci pour ton article qui m'a été d'une grande aide!!! Je galérais tellement!!! MERCIIIII!!!!!

    RépondreSupprimer
  4. Merci INFINIMENT pour cet article! J'ai enfin compris comment faire au bout de 4 jours de recherche.
    Merci, merci, merci!

    RépondreSupprimer
    Réponses
    1. Avec plaisir, très contente de t'avoir aider ! Moi aussi j'avais galéré avant d'arriver à ce résultat ;-)

      Supprimer
  5. Bonjour, super c'est très utile. Par contre une des icônes est un peu décalée par rapport aux autre je n'arrive pas à la remettre en place, une astuce ? Merci

    RépondreSupprimer
    Réponses
    1. regardes si tu n'as pas mis un espace ce qui pourrait décaler l'image ;-)
      A bientôt

      Supprimer
  6. Un énorme merci, j'ai essayé tout le weekend de me créer une social barre, mais pas moyen de trouver un widget approprié pour blogger.
    Ce tuto est extrêment bien expliqué, une novice comme moi a très bien su le comprendre, et j'ai enfin mes petits de réseaux sociaux roses. Je suis ravie, merci pour ton billet qui m'a apporté une immense aide

    RépondreSupprimer
    Réponses
    1. Je suis très contente de t'avoir aider, j'avais tellement galèré avant d'y arriver que j'ai voulu partager ....

      Supprimer
  7. Merci beaucoup pour le tuto !

    Grâce à toi, mon blog est devenu beaucoup plus sympa, maintenant que tous les liens sont regroupés ! :)

    RépondreSupprimer
  8. Très contente d'avoir contribuer à ton jolie blog ;-)

    RépondreSupprimer
  9. Merci mille fois pour cet article !!!
    Ca fait des heures que je navigue sur le net à la recherche de cette solution !!!
    Ton explication est complète et très claire. Merci encore !!!
    Grâce à toi je vais avoir des beaux boutons ^^

    RépondreSupprimer
    Réponses
    1. Il manque juste un petit bouton Youtube ^^

      Supprimer
    2. où ça sur mon blog ? Si oui je ne me suis pas encore lancer dans l'aventure ;-)

      Supprimer
  10. Mille merci, j'ai créé mes propres bannières de réseaux sociaux et suivi tes explications. C'est génial, ça fonctionne!!!

    RépondreSupprimer
  11. Après des jours d'arrachage de cheveux, je tombe sur ton article. Je comprends comment faire... et miracle ! ÇA MARCHE !
    Merci beaucoup tu m'a été d'une grande aide !

    RépondreSupprimer
  12. Merci infiniment!! Je suis toute nouvelle blouse et ton explication m'as sauvé la vie! Vraiment un énorme merci!!

    RépondreSupprimer
  13. SUPER! Vraiment génial!Si tu crois ne pas être claire dans tes explications, eh bien pour moi, c'est un vrai bonheur de te lire!
    Bonne continuation!

    RépondreSupprimer
  14. Bonsoir !
    Je cherchais la méthode la plus simple et ton tuto ici publié avec le lien pour les boutons gratuits des réseaux sociaux ont été très utiles.
    Merci beaucoup ;-) !

    RépondreSupprimer
  15. J'ai cherché longtemps pour trouver comment faire ! Merci infiniment !!!!!

    RépondreSupprimer

Related Posts Plugin for WordPress, Blogger...