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

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 !

Avant toute chose, je tiens à dire que ces tutos s'adressent à ceux qui veulent modifier leur template, ou qui justement ont choisi de ne pas télécharger de template. Car la manière la plus simple pour avoir un joli blog quand on ne sait pas coder, c'est évidemment de télécharger puis d'installer le template qui vous plait. Un template, c'est un modèle de blog déjà fait. Vous n'avez alors plus qu'à l'installer et à le personnaliser avec vos propres liens etc. Il y a des modèles gratuits, puis d'autres payants. A vous de voir ce qui vous convient. 

Une des plateformes de template les plus connus est Theme Forest. Les thèmes sont pro et jolis, mais payants pour la plupart. Le thème de mon blog vient de Themexpose, il était gratuit et me convient très bien. Je l'ai cependant modifié ici et là pour qu'il corresponde totalement à mes attentes.  

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 désormais tout en haut de la page, sur une simple bande noire. Mais avant d'avoir ce template, j'avais créé moi même mes boutons cliquables, et ils ressemblaient à ce que je vous ai mis juste au dessus. Ces icones étaient sous ma bannière, et étaient cliquables bien entendu. 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 ?