Comment créer les boutons ou onglets catégories et réseaux sociaux pour votre blog ?

10/19/2014



Bonjour ! 

Beaucoup d'entre vous se demande comment faire pour créer les boutons (les onglets, ou bien les catégories) pour leur blog. On va distinguer les "icônes de réseaux sociaux" des "boutons de catégories", mais la manière de faire pour les créer et les insérer sur votre blog est la même. Dans cet article, je vais donc vous proposer un tuto pour réussir à créer ces éléments graphiques qu'on retrouve désormais sur presque tous les blogs ! Mais attention, comme je ne suis pas très bonne en design, ni même en code html, je me suis toujours débrouillée pour le faire de manière simple, et j'ai quelques petites astuces à partager avec vous ! 

J'ai décidé de faire ce tuto car on me pose la question toute les semaines, au moins. Comme j'ai fait un article intitulé "Comment créer votre blog ? 10 conseils pour démarrer dans la blogosphère", pourquoi ne pas vous aider encore plus avec des explications "techniques" un peu plus poussées ? D'ailleurs, j'ai enfin créé une catégorie pour tous mes articles conseils que j'ai décidé d'intituler "Pimp ton blog et ton Instagram". Cette catégorie regroupe mes articles sur Instagram ("comment gagner des abonnés Instagram et devenir plus populaire ?" ainsi que "les meilleures appli de retouche photos pour Instagram" ou même "tuto retouche photo instagram"). Vous pouvez retrouvez ces articles à tout moment en cliquand sur l'icône ci-dessous, qui se trouve désormais de manière permanente dans ma sidebar !


Bon, entrons dans le vif du sujet ! Commençons par les icones de réseaux sociaux ! Je précise que ce tuto est surtout destiné à Blogger, la plateforme de blog que j'utilise. Bien sûr, cette technique fonctionne aussi sur les autres plateformes, mais je ne les ai jamais utilisé, donc il y a peut être des petites différences. 
Tout d'abord, il vous faut designer vos icones. Si vous êtes doué en Photoshop, alors mettez vous au travail et créez les icônes que vous voulez avec votre tablette graphique. Faîtes attention que chaque icône soit de la même taille. Il faut quelque chose de plutôt petit, quelques pixels seulement. 

Si vous n'avez jamais touché à Photoshop, alors téléchargez vos icônes sur des sites comme Designbolts ou Deviantart. Attention, regardez bien les conditions d'utilisation de ces icones. Il vous faudra surement linker ensuite quelque part sur votre blog ces sites qui vous ont gentiment laissé télécharger leurs images. (dans votre blogroll ou dans votre footer, par exemple). 

Ouvrez votre admin de blog et faîtes comme si vous vouliez écrire un nouvel article. Téléchargez les icônes (les images) dans l'article, puis liez chaque icône avec l'url de la page qu'il est censé représenter. Faîtes exactement comme si vous ajoutiez une URL à une photo. Comme d'habitude, quoi ! En gros, vous voulez juste rendre chaque icône cliquable avec le bon lien. Donc liez l'image de Twitter au lien de votre profil Twitter, etc. 

Une fois chaque icone lié au bon réseau social, cliquez sur "HTML" pour connaître le code html de l'article que vous venez de créer. Copiez ce code, ou gardez le sous la main. 

Allez dans votre éditeur de modules de blog. Moi, j'utilise Blogger, donc je vais dans la catégorie "layout". Ajoutez un nouveau widget. Choisissez "module html", et glissez le dans votre sidebar. Collez-y le code que vous aviez copié (celui de votre article). Sauvegardez. Tadaaaa, vos icones réseaux sociaux apparaissent dans votre sidebar, et ils renvoient bien vers vos pages !

Ne publiez pas votre article, laissez-le en brouillon ou supprimez-le !


Passons maintenant à vos catégories ! Moi, j'ai créé les catégories Voyage, DIY, Deco, Musique et Miam. Elles sont sous ma bannière, et sont cliquables. Elles renvoient donc vers tous les articles correspondants à cette catégorie. Mais comment ? 

C'est très simple ! Tout d'abord, comme pour les boutons de réseaux sociaux, il vous faut définir les images illustrant chaque catégorie. Moi, comme je ne suis pas bonne en design, j'ai choisi de très simplement écrire le nom des catégories sur Photoshop. Vous pouvez faire ça, ou bien choisir une image qui représente bien le thème. (Une photo d'une de vos recette pour la rubrique "cuisine" par exemple). Créez donc une image pour chaque catégorie (toutes de la même taille, encore une fois), et sauvegardez tout ça en jpeg. En gros, écrivez "Recette" sur Photoshop et enregistrez ça en jpg et en png. 

Ensuite, définissez vos tags. Quand vous écrivez un post, vous pouvez le tagguer (lui mettre une étiquette). Sur mon blog, ça s'appelle "Labels" et c'est une option par défaut, présente à chaque post que j'écris. Disons donc que vous voulez créer une catégorie voyage. Chaque fois que vous écrivez un post traitant du thème voyage, vous devez mettre le tag (le label) "voyage". Ce tag apparaîtra (ou non, dépendant de comment vous avez réglé vos préférences) sous chacun de vos articles à propos de ce thème, sur votre blog. Si vous cliquez dessus, il vous renvoie directement sur tous les articles ayant ce tag. 

Et bien justement, écrivez un article, tagguez le "voyage" (ou autre), publiez l'article, allez sur votre blog, et cliquez sur le tag. Ca va vous donner une URL (là haut, dans la barre d'adresse), de type : 

http://adressedevotreblog/search/label/travel

Copiez cette URL. 

Comme pour insérer vos boutons de réseaux sociaux, faites comme si vous vouliez écrire un nouveau post, uploadez et insérer vos images dans un post, et linkez les à l'url de vos tags. Il faut donc que chaque tag soit déjà créé sur votre blog, sinon, ça ne marche pas. De même que pour les boutons de réseaux sociaux, récupérez le code html de ce post, et insérez ce code dans un module html sur votre blog. Moi, j'ai choisi d'insérer ce module sous ma bannière, mais vous pouvez le mettre dans vos footer ou dans votre sidebar. 

Voilà, vous avez créer vos boutons de réseaux sociaux, et vos catégories ! Facile, non ? 

You Might Also Like

72 COMMENTAIRES

  1. Wauww super tuto! J'ai tellement chercher après des tutos comme tu viens de faire, j'ai galérer a mettre ceux si sur mon blog!
    Je suis sur que beaucoup de personnes ont ce problème et grâce a toi, ils seront comment faire!
    Bis et bon dimanche :)

    RépondreSupprimer
    Réponses
    1. Ahhh je suis contente que tu trouves cet article utile :)

      Supprimer
    2. Cet article est super ! Pile au bon moment merci beaucoup

      Supprimer
  2. Sympa comme tuto pour tout ceux qui comprennent pas ce genre de manipulation mais il faudra passer un jour a un bon blog sur wordpress :)

    RépondreSupprimer
  3. Franchement, je crois que tu es la première personne a avoir réussi à expliquer ces manipulations vraiment simplement et de manière totalement compréhensible.
    Je sais ce que je vais faire de mon dimanche. Merci merci.

    RépondreSupprimer
    Réponses
    1. super blog découvert un peu par hasard et au bon moment .
      1000 mercis !

      Supprimer
  4. Car il y a beaucoup plus de fonctionnalités, par exemple j'ai garder la page en favoris si non jamais j'aurais su que tu m'aurais répondu, en plus tout ce que tu fait chez blogger ne t'appartient pas vraiment. C'est vrai qu'il y a des trucs cool mais si tu veux vraiment le personnalisé avec des fonctionnalités assez différentes que ce que l'on voit sur blogger, newsletter...

    RépondreSupprimer
  5. Super tuto! Merci!!! J'utilise Blogger aussi et ça va vraiment m'aider pour customiser mon blog :)

    Helene
    http://excuse-me-i-am-french.blogspot.co.uk

    RépondreSupprimer
  6. Coucou j'ai lu ton article mais je n'arrive pas à ajouter l'URL sur la photo et je ne comprend pas trop bien le dernier paragraphe
    '' Allez dans votre éditeur de modules de blog. Moi, j'utilise Blogger, donc je vais dans la catégorie "layout". Ajoutez un nouveau widget. Choisissez "module html", et glissez le dans votre sidebar. Collez-y le code que vous aviez copié (celui de votre article). Sauvegardez. Tadaaaa, vos icones réseaux sociaux apparaissent dans votre sidebar, et ils renvoient bien vers vos pages !" Je ne trouve pas le ''module html'' ,ni la sidebar (je suis nouvelle sur Blogger) Merci :)

    RépondreSupprimer
  7. Merci beaucoup pour ces explications, tu es géniale !!! Bon dimanche ;)

    RépondreSupprimer
  8. Merci beaucoup pour ton article j'y suis enfin arrivée (je débute...).

    RépondreSupprimer
  9. merci Slanelle pour tes conseils. je viens d'ouvrir mon blog , en tant que passionnée des petits moments de la vie.
    tes conseils seront toujours les "bienvenus" pour m'aider à me rendre visible.

    ;)

    RépondreSupprimer
  10. Merci beaucoup, ce tuto et juste fantastique (ou c'est plutôt toi qui est fantastique ;) ! Je viens juste de commencer mon blog et ça m'a beaucoup aidé ;).

    RépondreSupprimer
  11. Je doit être une vraie galérienne moi, même après ce super tuto je n'y arrive toujours pas -_- Sa m’énerve.

    RépondreSupprimer
    Réponses
    1. Pareil :') Je comprends pas le dernier paragraphe ^^

      Supprimer
  12. Tout pareil pour moi... Je suis sous Blogger aussi. Je vois bien comment ajouter des Gadgets, mais pas des Widget. Je n'y arrive pas... Pourtant j'ai bien créé tout comme il faut jusqu'au langage HTML ! :-) Je continue de chercher !

    RépondreSupprimer
  13. Alors, j'ai réussi ! Mais c'est pas super super pour le moment... Donc si ça peut aider, je partage ce que j'ai fait sous Blogger.

    Pour ce paragraphe : "Allez dans votre éditeur de modules de blog...", je suis allée dans "Mise en page" puis "ajouter un gadget" puis "HTML/JavaScript". Et ça fonctionne. Sauf que je n'ai pas encore trouvé comment les mettre côte à côte ! Mais ça va venir.

    Merci encore pour cet article.

    RépondreSupprimer
    Réponses
    1. J'ai tout fait comme toi sauf que quand j'arrive à "ajouter un badge" je n'ai pas de "HTMP/JavaScript"

      Supprimer
    2. j'ai le meme problem et quand j'arrive a les mettre cote a cote les boutons ne fonctionne plus !! :(

      Supprimer
    3. As-tu trouvé comment les mettre à côter ?

      Supprimer
  14. merci beaucoup pour ton article qui m'a grandement aidée sur mon nouveau blog même si je suis avec wordpress :)
    si ça peut aider quelqu'un, j'ai trouvé de très jolis icônes ici : http://www.everylittlepolish.com/free-watercolour-social-media-icons/


    RépondreSupprimer
  15. Woua, super, merci pour cet article ! Je viens d'installer des jolis boutons de réseaux sociaux grâce à toi. Bon pour les catégorie, faut que je me concentre un peu plus, j'ai pas tout suivi ^^ Bises

    RépondreSupprimer
  16. Merciiiiiii!
    Aprem de geekette pour un blog tout beau :)

    RépondreSupprimer
  17. Salut!! Déjà merci beauuuucoup!! J'ai une question: où as tu trouvé ces stickers tout beaux pour ton clavier? ;)

    RépondreSupprimer
    Réponses
    1. Hello ! Je les ai eu dans une box My Litltle Paris, mais tu peux en trouver sur Etsy ;)

      Supprimer
  18. Super! C'est a partir de là que j'ai commencer à créer mon blog

    RépondreSupprimer
  19. Coucou! Super tout ces conseils! Malheureusement impossible pour moi de cliquer sur HTLM, je n'arrive pas à trouver... (Je suis sur WordPress) J'ai tout de même réussi à créer mes icônes (très simples) grâce à PicsArt. Si des blogueurs sous WordPress passent pas là, pouvez vous me dire où se trouvent "l'icône code HTLM".
    Je vous en remercie par avance. Et merci à toi pour cet article très complet!:)

    RépondreSupprimer
  20. Vraiment, je te dis un très grand merci, pour m'avoir permis de créer des boutons beaucoup plus esthétiques qu'à l'origine.
    Bravo pour ton sens de la technique, et de la pédagogie, et du partage (oui, oui, tout ça !).
    A bientôt,

    RépondreSupprimer
  21. Merci beaucoup pour cet article, il est parfait, très clair et efficace :)
    C'est très gentil d'avoir partagé tes connaissances.
    J'ai trouvé mes icones sur etsy, payantes mais à un prix très raisonnable (2-4€ environ)

    A bientôt, Gaëlle

    RépondreSupprimer
  22. Bonjour, je n'arrive pas à mettre mes articles publiée, dans mes différents onglets (mode, deco…), si quelqu'un peut m'aider; je n'arrive pas non plus à mettre les boutons facebook ou Instagram…
    Merci

    RépondreSupprimer
  23. J'ai une question : Comment fais tu pour mettre des photos Pinterest sur ton blog ? je n'y arrive pas :/

    RépondreSupprimer
  24. Super ton article. Je débute et c'était un plaisir de te lire pour avoir des pistes et un avis de quelqu'un qui est passé par là et qui s'en sort terriblement bien.
    @ bientôt peut etre

    RépondreSupprimer
  25. Merciiiiiii infiniment !!!!! Je débute a peine et je tâtonne en informatique, mais grâce a toi c'est devenu très ludique :)
    J'en profites pour te dire que j'adore ton blog et tes articles !!
    A bientôt jolie blogueuse :)

    RépondreSupprimer
  26. Bonjour, je suis actuellement entrain de créer mon blog ; mais malgré tes explications je n'arrive pas lors de l'ouverture de ma page à ne faire apparaître que mon unique article donc le label est ''home'' le second article à un libellé différent pourtant il s'affiche quand même sur la page d'accueil. Tu as un conseil ? Merci.

    RépondreSupprimer
  27. Canon!!! Le rendu est top. Je vais essayer ça :-)

    RépondreSupprimer
  28. Je reviens parce que j'ai une petite question qui est peut-être bête mais vu que je débute sur blogger, je n'ai pas encore trouvé.
    Comment fais-tu pour enlever la barre classique de blogger qui se trouve en bas des articles (publié par ... à ... + les boutons de partage pas hyper sexy...). Je vois que tu as personnalisé tes boutons de partage et tes labels. J'aimerais faire pareil...
    Merci d'avance pour ton aide!

    RépondreSupprimer
  29. Super ! Merci pour le partage... par contrre je n'arrive pas à les mettre côte à côté... :(

    RépondreSupprimer
  30. Super merci !! Pour les réseaux sociaux j'avais galeré mais grâce à toi d'autres vont pouvoir y arriver plus facilement.. Et tu m'as appris qu'on pouvait personnaliser la barre d'onglets aussi merci. Bisous

    RépondreSupprimer
  31. Merci pour cet article , je vais de ce pas passer à la pratique , et te suivre sur IG !!

    RépondreSupprimer
  32. Merci pour ce tuto ! J'ai compris ( je pense ) pour les boutons mais pour les catégories ça migote encore dans ma tête . Je suis nouvelle dans blogger dans voila . Je vais relire attentivement . Merci encore pour ce tuto ! 👌

    RépondreSupprimer
  33. coucou, rhoooo lala je suis trop trop contente !!! ca fait plus de 6 mois que j'essayais de mettre ca ! j'ai suivi plein de tuto sur la question et pas moyen... avec le tien en une foi c'est bouclé ;-) merci, merci ,merci je t'adore :-))))))))

    RépondreSupprimer
  34. Salut je ne comprend pas bien l'utilisation de "Blogger" ni les conseil que tu écrit ci-dessus. Je suis débutante mais j'aimerais beaucoup créée un blog donc comment faire? Je n'ai pas non plus photoshop et je ne peux rien acheter ( ni logiciels ni rien d'autre et je n'ai aucune idée de comment rédiger un bon article, pourrais tu m'aider ? Merci beaucoup pour tes articles ils très cool. Bis

    RépondreSupprimer
  35. Merci beaucoup pour ces conseils :) Est ce que tu créés tes "Découvrez aussi" avec les images de la même manière? Ou c'est autre chose? Je cherche à faire quelque chose de similaire.. A bientot :)

    RépondreSupprimer
  36. Je découvre ton blog aujourd'hui et je dois dire que c'est mon petit coup de coeur de ce début de journée! Plein d'infos super intéressantes et pratiques! Merci pour tout ces conseils!

    RépondreSupprimer
  37. Merci, merci et encore merci pour cet article qui m'a été d'une aide plus que précieuse ! A bientôt,
    Une blogueuse plus que débutante.. :)

    RépondreSupprimer
  38. Merci beaucoup !! Tu m'as beaucoup aidé, ça fais bien longtemps que je cherches une astuce !

    Bravo pour tout tes conseils :)

    RépondreSupprimer
  39. merci beaucoup je débute mon blog et sa m'a beaucoup aider pour insta et fb je suis encore sur les onglets je m'accroche lol

    RépondreSupprimer
  40. Excellent article qui m'a beaucoup aidé dans la création de mon blog !

    RépondreSupprimer
  41. C'est un article vraiment bien! J'ai essayé plusieurs tuto pour le même sujet sans rien comprendre et surtout sans y parvenir. mais là, c'était clair, rapide et efficace. Merci beaucoup :)

    RépondreSupprimer
  42. Super tuto mais il y a juste un truc que j'arrive pas à faire alors si quelqu'un peut m'aider ça serait sympa merci!
    Quand on met les boutons sociaux par exemple, on peut cliquer directement dessus mais moi j'arrive pas.... donc est ce que tu peux m'expliquer un peu plus détaillé comment ajoutez une URL à une photo, c'est juste ça que j'arrive pas à faire!?
    Merci!

    RépondreSupprimer
  43. je n'arrive pas à mettre le lien pour l'image :/

    RépondreSupprimer
  44. Merci beaucoup pour cet excellent article il m'a vraiment été très utile pour mes onglets ! Bisous

    http://notanotherbrickinthewall99.blogspot.fr/

    RépondreSupprimer
  45. excellent article .
    j'aime beaucoup tous ces informations pour connaitre comment créer les boutons ou onglets .
    merci pour le partage .

    RépondreSupprimer
  46. Bonjour,

    Je vous remercie pour cet article.

    Pourriez-vous me dire comment faire pour que la page instagram s'ouvre dans un autre onglet et non sur la page du blog lorsque l'on clique dessus?

    Je vous remercie !

    RépondreSupprimer
  47. Bonjour,
    Je suis débutante et je n'y arrive pas pourrais-tu m'expliquer s'il te plaît :)

    RépondreSupprimer
  48. Moi je galère avec les catégories, j'ai pas photoshop du coup je ne sais pas comment faire pour faire les catégories. Si quelqu'un peut m'aider.... Bisous à toutes.

    RépondreSupprimer
  49. Merci beaucoup pour tes conseils, et astuces. Même si mon blog n'est pas encore au point niveau "physique", mais il s'améliore grâce a toi. Biss

    http://ledressingduquotidien.blogspot.fr/

    RépondreSupprimer
  50. Coucou Slanelle! Merci beaucoup pour tes conseils! Je suis à deux doigts d'y arriver, mais j'ai l'impression d'avoir raté une étape! :-/

    En fait la catégorie est bien crée, l'image que je souhaitais est bien apparue, mais quand je clique dessus, l'image s'ouvre dans un nouvel onglet, mais je n'y vois pas les articles censés correspondre à la catégorie Beauté! Pourtant je les ai libellés "beauté" :(

    Si quelqu'un pouvait m'aider...

    Merci beaucoup!

    https://amalewords.blogspot.com/

    RépondreSupprimer
    Réponses
    1. Coucou ! J'ai l'impression que tu as oublié de lier ton image avec le lien correspondant ! Tu dois créer un poste (que tu ne publieras pas), uploader ton image, l'ajouter à ton post, puis la lier a l'url de ta catégorie. Et c'est ce lien hmtl créé que tu copie colle dans ton module html ;)

      Supprimer
  51. bonjour,
    svp, tu peux m'aider ce n'est pas a propos de ton article quand je modifie ma favicon elle n’apparaît pas dans mon blog

    RépondreSupprimer
  52. Bonjour

    Et merci pour les trucs! Ma fille m'avait expliqué mais c'était tout sauf clair... là j'ai compris.
    Je t'ai mis dans mon blog roll!

    Bonne journée
    www.buddybirdies.blogspot.fr : les aventures de Harry la souris punk

    RépondreSupprimer
  53. Merci pour ton article...
    http://lafilledesetoilesfilantes.blogspot.fr/

    RépondreSupprimer
  54. Coucou ! Merci beaucoup pour ton article, c'est bien le seul ou j'arrive à peu près à tout comprendre.

    Le problème c'est qu'il y a quelques chose qui n'est pas très clair pour moi. Je copie à chaque fois le mauvais lien html

    !Et je n'ai pas compris comment il fallait "lier" l'url avec l'image correspondante !
    Peux-tu m'aider svp ?
    Merci d'avance.

    RépondreSupprimer
  55. Coucou ! Je voulais savoir comment " uploader " l'image, puis comment la linker ? Si tu pourrais me dire comment faire, se serait super sympa! Merci beaucoup pour ton article qui m'a vraiment aidée !

    RépondreSupprimer
  56. Hello, un tout grand merci pour ton article et tes explications super claires et simples! J'ai créé mon blog il n'y a pas très longtemps et c'est exactement ce que je cherchais pour le mettre en forme sans y passer 3h...

    RépondreSupprimer
  57. Aidez moi j'ai créé un blog mais je sais pas comment gérer la déco

    RépondreSupprimer

Merci de passer par ici <3

*



Mes City Guides




*