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 !!
Merci, merci, merci ! Dés que j'ai un peu de temps je le fais...
RépondreSupprimerSi tu as quelques secondes j'ai créé un mini sondage sur mon blog http://chamalice.blogspot.com/
Bonne journée !
@Chamalice: Ravie que ça puisse te servir !
RépondreSupprimerje regarde ce sondage tout de suite ! ^^
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épondreSupprimerC'est normal si tu n'as pas changé le lien dans le code html après le "href"
RépondreSupprimer"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 !
Bonsoir ; Snif ça ne marche pas pour moi :(( chui nulle , je veux juste des libellés même pas des images (T__T)
RépondreSupprimerMerci, ça m'a bien été utile (:
RépondreSupprimer@Fleur de Lune: Envoie-moi un mail pour m'expliquer en détail ce qui ne va pas, et je t'aiderai ! :)
RépondreSupprimer@Laëtitia: Tant mieux, je suis contente que ça ait pu t'aider.
RépondreSupprimerAlors 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@Frenchie-Beauty: Si tu n'as pas Photoshop, je te conseille la méthode avec Paint (si t'as la nouvelle version).
RépondreSupprimer"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 !
Et bien merci beaucoup !! Je pensais cette épreuve insurmontable pour une débutante comme moi mais tu m'a prouvé le contraire :) !
RépondreSupprimerMerci encore !!
Merci pour ce tuto qui m'a été bien utile ^^
RépondreSupprimer@Little Miss Lili, Linadriel: De rein les filles, je suis contente que ça vous ai aidé :)
RépondreSupprimercoucou c est vraiment tres jolie tes catégories avec les images mais je ni arrive pas :(
RépondreSupprimerj 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?
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.
RépondreSupprimerSi tu peux m'aider, ce serait super!!
merci beaucoup
http://delautrecotedurideaurouge.blogspot.com
Bonjour Mag,
RépondreSupprimerAlors 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 ! ;)
@Sab, ça devrait t'aider aussi, non ?
RépondreSupprimerMerci beaucoup pour cette article ça m'a beaucoup aider <3
RépondreSupprimerCe fut pas facile, notamment pour redimmensionner les photos mais j'y suis arrivée , merci pour ton tuto !
RépondreSupprimerMerci!!
RépondreSupprimerMerci beaucoup !!!
RépondreSupprimer@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 ! :)
RépondreSupprimerBonne journée
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
RépondreSupprimerMci!
Han cet article est super mais moi ça me fait les catégories en doubles :/
RépondreSupprimerMerci, merci, merci!
RépondreSupprimerVraiment simple comme bonjour grâce à tes explications!!
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
RépondreSupprimerustensiles de cuisine originaux