[Tutoriel] Faire des catégories personnalisées sur Blogger

Un petit billet bonus ce soir, suite à une question de Jeanne du blog Girls Go Glam sur la façon dont je fais mes catégories personnalisées sur Blogger.

Ce n'est pas une option de la plateforme donc il faut le faire à la main et aller bricoler un peu. J'en profite donc pour faire un petit tutoriel, des fois que ça intéresse d'autres personnes.
Etape 1 : comment sont faites mes catégories
Il s'agit en fait de tous les billets ayant un libellé commun. Ce libellé, je le renseigne lorsque je poste un article, dans la colonne de droite. Par exemple, pour tous les billets de la catégorie beauté, je mets "beauté", pour tous ceux de la catégorie cuisine je mets "food", pour tous les billets humeur je mets "reflexion du jour". Peu importe en fait le nom de vos catégories, l'important est de bien les définir à la base et de bien renseigner le libellé correspondant à chaque billet.

Attention! Blogger est pointilleux : les majuscules et les accents comptent, faites donc bien attention à toujours écrire vos libellés de la même façon.
Etape 2 : récupérez les adresses URL de vos catégories
Une fois que vous avez défini vos catégories et édité au besoin vos articles pour rajouter les libellés correspondants, il va falloir récupérer le lien des pages de votre blog qui vont regrouper tous les billets de la même catégorie.
Pour cela, allez sur la page d'accueil de votre blog et rajoutez "search/label/*votre libellé*". Exemple pour mon libellé "beauté":

Vérifier que tous les articles ressortent bien et copiez/collez les adresses URL sur un bloc-note. Mettez-les de côté pour le moment.
Etape 3 : créez vos boutons
Avec un logiciel de graphisme, comme Photofiltre, The Gimp, Paintshop, Photoshop etc, créez vos boutons, en faisant attention à ce que leur taille soit adaptée à votre colonne de menu.

Etape 4 : hébergez vos boutons
J'héberge tout sur le site Photobucket.com pour ma part : c'est gratuit et simple à utiliser. Je charge tous mes boutons et je récupère pour chacune le code HTML.

Pour vous y retrouver, je vous conseille de reprendre votre bloc-note avec vos URL de libellés et d'assembler tout ça de cette façon:
Nom de votre catégorie/libellé 1 Adresse URL du libellé (que vous avez donc déjà récupérés avant) Code HTML de votre bouton chargé sur photobucket. ----------------------------------------------------------------------
Nom de votre catégorie/libellé 2 Adresse URL du libellé  Code HTML de votre bouton chargé sur photobucket.  Et ainsi de suite...
Ce sera bien plus simple pour la suite.
Etape 5 : l'intégration sur votre blog
C'est clairement la partie la plus compliquée pour celles qui n'ont jamais touché au HTML. Mais on va y aller doucement!
Rendez-vous sur le tableau de bord de votre blog, dans la partie "Mise en page". Là où vous voulez placer vos catégories, cliquez sur "ajouter un gadget". Parmi les propositions choisissez "HTML/Javascript".

Nommez votre rubrique (moi je l'ai appelée très originalement "Catégories") et prenez votre bloc-note.
C'est là qu'il faut être attentif : copiez/collez le code HTML de votre bouton dans la nouvelle fenêtre, et remplacez ce qui se trouve après  < a href=" par l'adresse URL de votre libellé.
Donc ça donnera:
< a href="Votre URL de libellé " >
Faites attention à ne pas enlever les guillemets au passage, ils sont importants.
Exemple sur mon blog :

Avant de passer au bouton suivant, encadrez chaque code HTML par < p > et (sans les espaces):
< p >Votre code HTML</ p>
En langage HTML, ça indiquera qu'il s'agit de paragraphe et ça laissera un espace raisonnable entre chaque bouton, en en ayant un par ligne.
Et pour que ça soit plus joli, une fois que vous aurez copié/collé et modifié tous vos codes HTML, encadrez l'ensemble de tout ce charabia par < center > et (sans les espaces), histoire de centrer.
< center >Tout le code </ center>
Je vous mets mon code pour que vous puissiez bien voir:
- Les balises "center" au début et à la fin - Les balises "p"avant et après chaque code HTML d'image - Les adresses URL de mes pages catégories juste après < a href="

Vous n'avez plus qu'à valider et à placer ce nouveau gadget là où vous voulez!
S'il y a des choses malgré tout pas claires, n'hésitez pas à poser vos questions en commentaires ;)
xx