mardi 1 novembre 2016

Créer une barre de catégorie / Mettre des liens sur une image facilement et rapidement


J'ai longtemps cherché comment crée une catégorie facilement et en mettant directement les liens sur l'image en elle-même. Maintenant que j'ai réussie je viens vous montrez tout ça.

Malgré de nombreux tutos sur internet je ne trouvé pas mon bonheur, comme je vous ai dit je cherché vraiment comment sélectionné sur une image une partie et ensuite ajouté un lien. Et j'ai trouvé mon bonheur ! Comme vous le verrez juste au-dessus j'ai réalisé ma barre de catégories et je fait aussi mes Outro en fin d'article avec. (cliquez ici pour voir ce qu'est une outro)



Vous devez créer votre image à la dimension souhaité, je vous conseille de prendre la largeur de votre bannière. Moi elle fait 1200 environ. Voici l'exemple que j'ai pris pour ce tutoriel :

Si vous ne savez pas ou crée des petites choses dans ce style vous pouvez télécharger gratuitement Photofiltre qui est très simple d'utilisation ou vous rendre sur le site Picmonkey. Si vous avez beaucoup de difficulté contacté moi je vous expliquerez. 


Vous devez faire hébergé votre image suivez donc les étapes suivantes.


  • Se rendre sur le site NoelShack 
  • Cliquer sur "Depuis votre ordinateur"
  • Sélectionner votre image puis cliquez sur "Ouvrir"
  • Puis cliquer ici : 




  • Puis clique droite et copier le lien ou il y écris "URL des images" comme ceci : 





  • Se rendre sur le site Htlm-map
  • Coller l'Url de l'image et cliquez sur "Start"




  • Quand vous allez sur la photo un + va s'afficher, avec vous devez sélectionner les zones où vous voulez mettre des liens. Voici moi ce que j'ai fait :



  • Puis sélectionner par exemple la partie 1 la catégorie Accueil. Vous devez donc ajouté le lien de votre blog ou il y a écrit "Enter link URL" et à côté moi je met à quoi correspond la catégorie donc "Accueil" Comme ceci :



  • Si vous voulez que votre catégorie désigne qu'un thème par exemple là le thème de la beauté, vous allez devoir ajouté derrière l'adresse de votre blog /search/label/Beauté. Et automatiquement les lecteurs irons sur tout les articles ayant comme libellé le mot Beauté. Vous pouvez changer ce mot par un autre en fonction des catégories.

Par exemple, si sur mon blog je veut vous montre tout les articles sur le maquillage je mettrai :
https://bytiphaine.blogspot.fr/search/label/Maquillage


  • Une fois que c'est terminé vous cliquez sur "Click here to finish"
  • Copier le "HTLM Map Code"



Ensuite il faut placé ce code sur votre blog. Je ne sais pas pour Wordpress mais ça doit être très facile à trouvé et similaire. Pour Blogger vous devez : 


  • Aller sur Blogger 
  • Cliquer sur "Mise en page"
  • Cliquer sur "Ajouter un Gadget" dans l'emplacement "Toutes les colonnes" 




  • Puis sur HTLM /Jave script juste ici :




  • Puis cliquez coller ce que vous avez copier juste avant et cliquer sur "Enregistrer" 


  • Cliquer sur "Aperçu" et si ça vous convient cliquez sur "Enregistrer"



Voilà, ce tutoriel est terminé. Surtout si vous avez besoin d'aide n’hésiter pas à me joindre en mail ou sur les réseaux sociaux et je vous aiderez. (contact.bytiphaine@gmail.com)
jelarguelesiliconehcfbinstaImage HTML map generator

1 commentaire:

  1. Bien trouvé l'astuce pour ton menu, je ne la connaissait pas celle-ci.
    Cela ne fonctionnera pas sous WP.com car il n'y a pas de possibilité d'ajouter du code comme dans blogger.

    RépondreSupprimer