mercredi 13 octobre 2010

Tuto : Faire des catégories avec blogger

Après plusieurs demandes, voilà, je fais enfin le tutos sur les catégories que j'ai promis lors de cet article "Customiser son Blog sur BLOGGER" !

Nous allons donc voir comment illustrer ses catégories sur blogger avec des images.

Sur Blogger, tu peux classer tes billets, avec ce qu'ils appellent les "libellés".


1ère étape: Créer des libellés et classer ses billets
Une fois connecté à la plateforme Blogger, allez dans Publication d'un message / Modifier les messages

Au-dessus de la liste de tes billets, on trouve la liste déroulante "Actions de libellé...". Il suffit d'ouvrir la liste, cliquer sur "Nouveau libellé", et ajouter autant de libellés que de catégories désirées.

Pour classer ses billets, il suffit de cocher tous les billets qu'on veut rassembler, cliquer sur "Actions du libellé...", et choisir le libellé désiré.



2ème étape: Mettre les libellés sur le blog

Maintenant les catégories sont délimitées. Il s'agit de regarder et conserver les URL des différentes catégories.

Aller dans Présentation / Ajouter un gadget, et sélectionner "Libellés".

Quand on va sur le blog, on note que les libellés sont bien présents, mais seulement avec des noms, et non des images.

Cliquer sur chaque libellés, et conserver l'URL de chaque catégories dans un fichier texte.


3ème étape: Créer un texte html pour insérer des images

Pour faire un menu "catégories" en image, il faut concevoir un texte html de ce type :

Il faut donc récupérer les url d'images que vous voulez insérer et les URL des libellés qu'on a récupéré de l'étape 2 !


ATTENTION: avant de mettre une quelconque image, il est nécessaire de créer vos catégories dans les dimensions adéquates. 

L'image ne doit pas dépasser les dimensions de la colonne dans laquelle vous voulez insérer les catégories. 

Pour vérifier, aller dans Présentation / Modifier le code html et regarder de combien de pixels fait votre colonne de droite dénommée : 

SIDEBAR-WRAPPER

La mienne fait 280px. Je vais donc créer des images de 250px de long.

Une fois toutes vos images de catégories créées, on peut les héberger sur le blog en les incluant dans un message. Nouveau Message / Insérer une image / Modifier le code html, et on trouve une URL de type :

Maintenant que nous connaissons les URL des images, et les URL des libellés y'a plus qu'à assembler !

Aller dans Présentation / Ajouter un gadget, choisir HTML/javascript et recopiez le code ci-dessous en remplaçant pas les URL gardées précédemment !


Affichez le blog, et hop c'est tout beau !!! Suffit juste de supprimer le gadget "Libellés" maintenant qu'on n'en a plus besoin !!

26 Bla Blas:

  1. Merci, merci, merci ! Dés que j'ai un peu de temps je le fais...

    Si tu as quelques secondes j'ai créé un mini sondage sur mon blog http://chamalice.blogspot.com/

    Bonne journée !

    RépondreSupprimer
  2. @Chamalice: Ravie que ça puisse te servir !
    je regarde ce sondage tout de suite ! ^^

    RépondreSupprimer
  3. Salut ! Excuse moi mais quand je crée le tout et que je recopie l'html définitif lorsque je vais sur mon blog et que je clique sur les catégories crées elles m'amènent non pas vers le post mais vers l'url de l'image seulement. Je ne comprends pas...

    RépondreSupprimer
  4. C'est normal si tu n'as pas changé le lien dans le code html après le "href"

    "img src" -> lien html de l'image à mettre
    "href" -> lien de la page choisie

    Avec la nouvelle version de blogger, tu as la possiblité de modifier aussi le lien dans la mise en page:
    - tu cliques sur l'image
    - tu cliques sur "modifier le lien"
    - tu supprimes de lien de ton image
    - et rajoutes le lien vers la page correspondante

    Moins compliqué que de bidouiller le code html !

    RépondreSupprimer
  5. Bonsoir ; Snif ça ne marche pas pour moi :(( chui nulle , je veux juste des libellés même pas des images (T__T)

    RépondreSupprimer
  6. Merci, ça m'a bien été utile (:

    RépondreSupprimer
  7. @Fleur de Lune: Envoie-moi un mail pour m'expliquer en détail ce qui ne va pas, et je t'aiderai ! :)

    RépondreSupprimer
  8. @Laëtitia: Tant mieux, je suis contente que ça ait pu t'aider.

    RépondreSupprimer
  9. Alors moi je suis Opé ! mais le seul truc je ne sais pas comment on créer enfin modifie une image afin qu'elle soit plus petite 250px ?????

    RépondreSupprimer
  10. @Frenchie-Beauty: Si tu n'as pas Photoshop, je te conseille la méthode avec Paint (si t'as la nouvelle version).
    "redimensionner", et hop tu mets la largeur que tu veux !
    Sinon t'as encore microsoft office picture manager, et l'outil "rogner", et "redimensionner"!!
    En espérant que ça te serve !

    RépondreSupprimer
  11. Et bien merci beaucoup !! Je pensais cette épreuve insurmontable pour une débutante comme moi mais tu m'a prouvé le contraire :) !
    Merci encore !!

    RépondreSupprimer
  12. Merci pour ce tuto qui m'a été bien utile ^^

    RépondreSupprimer
  13. @Little Miss Lili, Linadriel: De rein les filles, je suis contente que ça vous ai aidé :)

    RépondreSupprimer
  14. coucou c est vraiment tres jolie tes catégories avec les images mais je ni arrive pas :(
    j ai réussi tout de meme à mettre catégorie sur le coté de mon blog mais pour les images j'ai beau tout essayer ........
    peux tu m'aider?

    RépondreSupprimer
  15. Bonjour, moi je n'ai pas compris comment on récupère les url des libellés et des images.Cela fait trois heures que j'essaie plein de choses, mais rien à faire.
    Si tu peux m'aider, ce serait super!!
    merci beaucoup
    http://delautrecotedurideaurouge.blogspot.com

    RépondreSupprimer
  16. Bonjour Mag,
    Alors reprenons...
    Tu écrits un article. Pour ajouter des images, tu vas dans "ajouter une image". Une fois ton image ajoutée qui apparaît dans ton article.
    Clique dans "html". Là tu verras apparaître un code avec < img src=> entre les guillemets apparaît une url, prend la, et copie colle la dans une nouvelle page. Tu verras l'image apparaître.
    Ceci est l'URL DE TON IMAGE ! :)
    N'hésite pas si tu n'as pas compris ! ;)

    RépondreSupprimer
  17. @Sab, ça devrait t'aider aussi, non ?

    RépondreSupprimer
  18. Merci beaucoup pour cette article ça m'a beaucoup aider <3

    RépondreSupprimer
  19. Ce fut pas facile, notamment pour redimmensionner les photos mais j'y suis arrivée , merci pour ton tuto !

    RépondreSupprimer
  20. @Amandine, Isa TS, Emilie Tremblay, Valène J: Je suis contente de vous avoir aidé ! Une d'entre vous avait d'autres questions à ce sujet, j'y répondrai par un nouveau post ! :)
    Bonne journée

    RépondreSupprimer
  21. Merciiii beaucoup beaucoup pour ta claireté dans les explications!! Je n'ai trouvé nulle part ailleurs ce dont je cherchais à part sur ton blog :D

    Mci!

    RépondreSupprimer
  22. Han cet article est super mais moi ça me fait les catégories en doubles :/

    RépondreSupprimer
  23. Merci, merci, merci!

    Vraiment simple comme bonjour grâce à tes explications!!

    RépondreSupprimer
  24. D'excellents conseils. Trucs vraiment utiles .Ne a eu une idée à ce sujet, va chercher plus de ces messages d'information de votre part .. Bon travail ... Keep it up
    ustensiles de cuisine originaux

    RépondreSupprimer