Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Ajouter des images à la barre de navigation

Déjà une semaine que je ne vous ai pas écrit ! Ça ne vas pas du tout, il ne faudrait pas que ça devienne une habitude !

Mais j'ai une excuse : boulot. Eh oui, j'ai pas mal de chose à faire en ce moment et ça me prend beaucoup de temps. Mais je vous en parlerai plus en détail très bientôt, ça sera pour un autre post. En plus, je vous prépare une petite surprise mais chuut ! :)

Ajouter des images à la barre de navigation

Aujourd'hui je vais vous expliquer comment ajouter une image à sa barre de navigation, que ce soit un élément décoratif, ou remplacer le texte d'un lien par une image.

C'est parti pour les explications !


Introduction

Je considère que vous avez déjà créé votre barre de navigation et que vous l'avez déjà personnalisé.
Si ce n'est pas le cas, vous pouvez retrouver les explications dans les premiers tutoriels sur la création de la barre de navigation et sa personnalisation.

Une fois votre barre de navigation créée et prête à l'emploi, allez dans la partie Mise en Page à partir de votre tableau de bord :

Ajouter des images à la barre de navigation

Sur le widget HTML/JavaScript de votre barre de navigation, cliquez sur Modifier :

Ajouter des images à la barre de navigation

Vous devriez avoir quelque chose qui ressemble à ceci :

Ajouter des images à la barre de navigation

C'est sur ce code que l'on va jouer pour ajouter des images.


Remplacer le texte d'un lien par une image

Pour remplacer le texte d'un lien par une image il faut ajouter le code suivant à la place du texte du lien :
<img src="http://adresse-de-l'image.png" />
Par exemple, dans ma barre de navigation ci-dessous, je veux remplacer le texte du lien Contact par l'image d'une enveloppe.
<div id="barre_nav">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a>
<ul>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
</ul>
</li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Je remplace donc Contact par :
<img src="http://4.bp.blogspot.com/-h4Lr5U7W5TI/VDvLlswUFJI/AAAAAAAACGc/NcT1l-uzOhk/s1600/mail.png" />
Comme ceci :
<div id="barre_nav">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a>
<ul>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
</ul>
</li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Catégorie</a></li>
<li><a href="#"><img src="http://4.bp.blogspot.com/-h4Lr5U7W5TI/VDvLlswUFJI/AAAAAAAACGc/NcT1l-uzOhk/s1600/mail.png" /></a></li>
</ul>
</div>
Ce qui donne :

Ajouter des images à la barre de navigation


Ajouter une image avant un lien

Si vous voulez ajouter une image avant un lien, il faut ajouter le code de l'image :
<img src="http://adresse-de-l'image.png" />
1 - Avant le texte du lien : l'image sera également considéré comme un lien
2 - Avant le lien (<a>) : l'image ne sera pas considéré comme un lien.

Dans le premier cas il faut insérer le code comme suit :
<div id="barre_nav">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a>
<ul>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
</ul>
</li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Catégorie</a></li>
<li><a href="#"><img src="http://adresse-de-l'image.png" />Contact</a></li>
</ul>
</div>
Dans le 2e cas il faut ajouter le code comme suit :
<div id="barre_nav">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a>
<ul>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
</ul>
</li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Catégorie</a></li>
<li><img src="http://adresse-de-l'image.png" /><a href="#">Contact</a></li>
</ul>
</div>
Dans les 2 cas, visuellement on obtient :

Ajouter des images à la barre de navigation

Vous avez sans doute remarqué que l'image est collé au texte du lien.
Pour régler ce problème, on va ajouter un code CSS pour ajouter un espace entre l'image et le lien.

Cliquez sur Modèle dans le menu à gauche :

Ajouter des images à la barre de navigation

Puis sur Modifier le code HTML :

Ajouter des images à la barre de navigation

Cliquez sur la flèche noir à gauche de la ligne <b:skin>...</b:skin> :

Ajouter des images à la barre de navigation

Cliquez n'importe où dans la boîte de code. Puis appuyez sur Ctrl et F en même temps.
Dans la boîte de dialogue qui apparaît en haut à droite de la boîte de code tapez /* Tabs et appuyez sur Entrer.

Vous devrez tomber sur le code CSS de votre barre de navigation :

Ajouter des images à la barre de navigation

Juste en dessous copiez ce code :
/* Espacement des images de la barre de navigation */
#barre_nav img {
padding-top: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 5px;
}
Comme ceci :

Ajouter des images à la barre de navigation

Pour changer l'espacement entre l'image et le texte on change la valeur de padding que l'on souhaite, sachant que :
  • padding-top correspond à l'espace au-dessus de l'image
  • padding-left correspond à l'espace à gauche de l'image
  • padding-bottom correspond à l'espace en-dessous de l'image
  • padding-right correspond à l'espace à droite de l'image

Dans cet exemple j'ai choisi d'ajouter un espace de 5 pixels à droite de l'image (padding-right) ce qui donne :

Ajouter des images à la barre de navigation


Ajouter une image après un lien

Pour ajouter une image après un lien, il faut ajouter le code de l'image :
<img src="http://adresse-de-l'image.png" />
1 - Après le texte du lien : L'image sera également considéré comme un lien
2 - Après le lien (</a>) : L'image ne sera pas considéré comme un lien.

Dans le premier cas il faut insérer le code comme suit :
<div id="barre_nav">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a>
<ul>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
</ul>
</li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Contact<img src="http://adresse-de-l'image.png" /></a></li>
</ul>
</div>
Dans de 2e cas il faut ajouter le code comme suit :
<div id="barre_nav">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Catégorie</a>
<ul>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
<li><a href="#">Libellé</a></li>
</ul>
</li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Catégorie</a></li>
<li><a href="#">Contact</a><img src="http://adresse-de-l'image.png" /></li>
</ul>
</div>
Dans les 2 cas, visuellement on obtient :

Ajouter des images à la barre de navigation

De la même manière, il faut corriger l'espacement entre l'image et le lien.
Ici, on veut ajouter un espace à gauche de l'image, on change donc la valeur de padding-left comme ceci :
/* Espacement des images de la barre de navigation */
#barre_nav img {
padding-top: 0px;
padding-left: 5px;
padding-bottom: 0px;
padding-right: 0px;
}
Ce qui donne :

Ajouter des images à la barre de navigation

Et voilà pour aujourd'hui ! Vous savez maintenant comment ajouter des images à votre barre de navigation ;)

Autres articles

32 commentaires:

  1. Merci pour ces bons conseils. Pas évident de trouver de bons tutos pour blogger mais là, j'ai trouvé on bonheur sur ton blog!

    RépondreSupprimer
  2. Enfin un blog clair et efficace! Mille merci!
    Quelques questions subsistent néanmoins et pourraient faire l'objet de prochains tuto: pourrais-tu m'expliquer comment programmer que toutes mes images aient la même largeur ?! Comment mettre des tags à la fin d'un article ?!
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. J'ai tout noté, j'ajoute ça à ma petite liste de tutos à préparer ;)

      Supprimer
  3. coucou je voudrais avoir comment on fais pour mettre une image a coté d'un texte par exemple sur la colonne de droite ou j'ai mis sortie cinema je voudrais mettre une photo mais je sais pas comment on fait ! je sais pas si j'ai bien expliquer ! sinon le tuto que tu as fait c'est pour faire comme toi mettre une image derriere le menu de navigation ou pas car j'ai rien compris lol
    merci d'avance

    RépondreSupprimer
  4. je voudrais egalement savoir comment on fais pour mettre une image en arriere plan des titres des articles
    merci d'avance

    RépondreSupprimer
    Réponses
    1. Salut Emma,
      J'ai tout noté sur ma liste de tutos à faire :)

      Supprimer
  5. Hey !

    Absolument géniaux tes tutos. Je dois avouer que je m'en inspire pas mal pour mon blog (je découvre le HTML avec...)
    Juste pour savoir, tu l'as trouvé où la petite icône pour le mail ? Je l'aime bien !

    Merci beaucoup pour tout en tout cas.
    (Si tu visites mon blog, tu pourras y voir ton oeuvre)

    RépondreSupprimer
    Réponses
    1. Bonjour, pour mes boutons j'ai utilisé une police gratuite : Entypo (http://www.fontsquirrel.com/fonts/entypo). Il en existe d'autres comme Font Awesome (http://fortawesome.github.io/Font-Awesome/). C'est vraiment pratique :)

      Supprimer
    2. Bonsoir! ^^

      Je tiens d'abord à te dire que ton blog et tes tutos est juste génial! Je voulais remettre à neuf mon blog et tes tutos me sont super pratiques pour ça, même si parfois je bloque ou galère un peu, grâce à tes explications claires et précises dans tes posts comme tes commentaires, je finis toujours par y arriver. ^^

      Par contre, là où ça coince, c'est pour installer des icons. J'ai installé des boutons CSS sur mon blog via un tuto précédent, mais ce n'est pas ce que je souhaiterais le plus. Je préférerais avoir des petites icones pour ça et pour pouvoir les mettre par la suite dans une espèce de mini barre de navigation horizontale sur ma barre latérale.
      Du coup je voulais savoir si c'était possible de faire un tuto qui explique comment se servir de sites comme FontSquirrel ou Font Awesome?
      Une explication aussi sur comment mettre des boutons- icons dans un même widget sur la barre latérale serait intéressant aussi du coup.. >.<

      Bref, en tous cas, merci pour la découverte des joies du CSS et HTML!
      Une fois fini, je te citerais je pense vu tout ce que j'aurais mis en pratique, héhé! ^^

      Supprimer
    3. Bonjour Arlénone Snow,
      J'ai vu que tu as trouvé mon tuto sur le sujet ^^
      Je mets quand même le lien pour d'autres lecteurs au cas où ;)

      http://ladybirdr.blogspot.com/2015/11/creer-des-boutons-de-partage-en-html-et.html

      Pour le gadget dans la barre latérale, il te suffit de remplacer les textes des liens des boutons CSS par le code HTML des icônes que tu souhaites utiliser. Voici le code CSS pour définir l'apparence des icônes à partir des boutons CSS :

      /* Apparence des icônes des boutons CSS */
      #btnCSS .fa {
      }

      /* Apparence des icônes des boutons CSS au survol de la souris */
      #btnCSS .fa:hover {
      }

      Supprimer
  6. Coucou,

    J'ai découvert ton blog il y à peu et je dois dire que je suis vraiment contente de t'avoir découverte, ton blog est très utile et tes articles très bien expliqués, merci.
    J'ai essayé comme tu l'explique de remplacer mon texte home dans ma barre de navigation par une image, le liens fonctionne bien mais l'image ne s'affiche pas, à la place un rectangle s'affiche. Sais-tu d'ou viens le problème ?
    Merci d'avance et continue comme ça ton blog est génial !

    RépondreSupprimer
    Réponses
    1. Bonjour Camille,
      Cela vient sûrement du lien URL de ton image. Tu peux utiliser Blogger pour ajouter tes images sur internet pour générer un lien URL. Créé un nouvel article brouillon et ajoutes tes images. Enregistre l'article mais ne le publie pas. Fais un clique-droit sur l'image et sélectionne Copier l'adresse du lien pour copier le lien URL de l'image. Attention à ne pas sélectionner Copier l'URL de l'image, car ça ne marchera pas.

      Supprimer
    2. Super merci pour ta réponse :)

      Supprimer
  7. Bonsoir,
    Merci beaucoup pour ce tuto ! J'ai ajouté pour ma part les images dans les sous-catégories et je voulais savoir comment faire pour les espacer des liens ? :)

    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour Mélissa,

      Rajoutes le code suivant à la suite des codes CSS de ton menu :

      #cssnav li img {
      margin-left: 10px;
      }

      Changes la valeur de 10 pixels (10px) en l'augmentant ou en la diminuant pour obtenir ce que tu souhaites ;)

      Supprimer
    2. Merci beaucoup, c'est super :D !!!

      Supprimer
  8. Bonjour !
    C'est encore moi, huhu.
    Je suis effectivement très intéressée par ce tuto, cependant, quelques questions me viennent à l'esprit : où peut-on trouver des images comme celle de l'exemple ou de ta barre de navigation ? Comment fait-on pour décaler les liens vers la droite ou vers la gauche (comme toi) sur la barre de navigation ?

    Pleins de bisous,
    Clémence

    RépondreSupprimer
    Réponses
    1. Bonjour Clémence,
      Tu peux trouver ces images un peu partout sur le web. Cherches des "icônes" c'est le petit nom de ces images ;)
      Par exemple, tu peux en trouver sur Creative Market, Flaticon, ou The noun project. Attention simplement aux droits d'utilisation de ces icônes, si tu dois citer les sources ou non ;)

      Supprimer
  9. Bonjour Catherine !
    J'ai ajouté des petites icones facebook, tumblr etc comme toi dans la barre de navigation mais comment faire pour réduire l'espace entre chaque icone et les mettre tout à droite comme toi car actuellement elles sont collées aux autres onglets?

    (birdymarlowe.com)

    Merci par avance, et continue comme ça ! Ton blog est une source perpétuelle d'inspiration !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Un tutoriel sur le sujet est prévu ;)

      Supprimer
  10. Bonjour !
    Merci pour ce super tuto :)
    Pour ma part tout roule, excepté le fait que je ne peux pas décaler ma petite icône de sorte à ce qu'elle soit aligné avec "contacts", j'ai beau bidouiller les padding top et bottom rien ne se produit. Je ne comprend pas , parce que pourtant les padding left et padding right fonctionne quand je modifie leur valeur...

    Merci d'avance !
    http://pasdethique.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Elo,
      Ajoute ces 2 lignes :

      position: relative;
      top: 4px;

      Avant le signe } de ton code CSS :

      /* Espacement des images de la barre de navigation */
      #barre_nav img {
      padding-top: 0px;
      padding-left: 5px;
      padding-bottom: 0px;
      padding-right: 0px;
      }

      Comme ceci :

      /* Espacement des images de la barre de navigation */
      #barre_nav img {
      padding-top: 0px;
      padding-left: 5px;
      padding-bottom: 0px;
      padding-right: 0px;
      position: relative;
      top: 4px; /* Position par rapport au haut */
      }

      Remplace 4px par la valeur de ton choix. Une valeur positive déplacera ton image vers le bas et une valeur négative la déplacera vers le haut ;)

      Supprimer
    2. Cela fonctionne ! T'es la meilleure, merci beaucoup Catherine :)

      Supprimer
  11. Bonjour Catherine,
    Déjà je tiens à te remercier pour tous les superbes tutos que tu proposes, tu me sauves la vie ! Maintenant mon blog est à mon goût et me ressemble vraiment, alors merci !
    J'ai simplement une petit question, saurais-tu où est-ce que je pourrais trouver un icon comme ta petite enveloppe mais pour Wattpad (une plateforme pour les écrivains) ? Je cherche depuis quelques jours sur internet, mais je t'avou que je sèche un peu... Aurais-tu une solution ?
    Merci beaucoup d'avance, pour toute réponse quel qu’elle soit !

    RépondreSupprimer
    Réponses
    1. Bonjour Ambre,
      Malheureusement, à moins de le créer toi-même, je ne pense pas que tu trouveras facilement un icon pour Wattpad. La plateforme n'est peut-être pas assez connu :/

      Supprimer
    2. Désolée de répondre aussi tard, j'avais oublié de te répondre...
      En tout cas, je te remercie de ta réponse ! Sais-tu sur quoi on peut créer un icon ?

      Supprimer
    3. Bonjour Ambre,
      Tu peux créer des icônes sur un logiciel d'édition d'images comme Photoshop (payant), Gimp (gratuit), ou Pixlr (gratuit et en ligne).

      Supprimer
  12. Bonjour, merci pour ton tutoriel, je suis en train d'essayer des utoriels sur un blog test mais en modifiant le code html ca me mets erreur et du coup les libellés ne se déroule pas mais sont affichés en dessous des catégories comment faire ? merci de ta réponse

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Est-ce ce problème est survenu seulement après avoir suivi ce tutoriel ?
      Si oui, alors vérifie que tu n'as pas supprimé de code dans le code HTML de ton menu. Vérifie qu'il y a bien tous les <li> </li> <ul> et </ul> car ils vont définir les débuts et fins des listes de liens du menu.

      Supprimer
  13. Hi ! ma belle Cath, merci pour ce super tuto très bien expliqué ! Je voulais savoir comment on peut faire pour avoir une image lorsque l'on passe sur un lien. Par exemple, j'ai ma rubrique SWEET HOME pour revenir à ma page d'accueil et j'aimerai que lorsque l'on passe dessus une petite maison rose s'affiche. Comment je pourrais procéder s'il te plaît ? j'aimerai tellement que mon tout nouveau blog soit opé d'ici la fin de la semaine même si je dois mettre mes mains dans le html lol ! merci d'avance ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      J'ai créé un tutoriel exclusif pour réaliser exactement ce que tu cherches à faire. Tu peux le trouver à la fin de ce tutoriel ;)

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger