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 ! :)
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 :
Sur le widget HTML/JavaScript de votre barre de navigation, cliquez sur Modifier :
Vous devriez avoir quelque chose qui ressemble à ceci :
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" />Je remplace donc Contact par :<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>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCIMUqKa4EOLecFyb5jkiuRaY5vBmPlVaErhzN7KOaP2K4WlZGov1rD1kAvvx6bX9RtHY_9AGqxBSBZbf9VcKr1xXBTNjc5mTE9_ZKD2QXJmbAemnKfp8kz6AtWjBBbp50QEMzA4BpjzI/s1600/mail.png" /><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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCIMUqKa4EOLecFyb5jkiuRaY5vBmPlVaErhzN7KOaP2K4WlZGov1rD1kAvvx6bX9RtHY_9AGqxBSBZbf9VcKr1xXBTNjc5mTE9_ZKD2QXJmbAemnKfp8kz6AtWjBBbp50QEMzA4BpjzI/s1600/mail.png" /></a></li>
</ul>
</div>
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" />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 :
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><a href="#"><img src="http://adresse-de-l'image.png" />Contact</a></li> </ul> </div>
Dans les 2 cas, visuellement on obtient :<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>
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 :
Puis sur Modifier le code HTML :
Cliquez sur la flèche noir à gauche de la ligne <b:skin>...</b:skin> :
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 :
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;
}
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 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" />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 :
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<img src="http://adresse-de-l'image.png" /></a></li> </ul> </div>
Dans les 2 cas, visuellement on obtient :<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>
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;
}
Et voilà pour aujourd'hui ! Vous savez maintenant comment ajouter des images à votre barre de navigation ;)
