Barre de menu avec image

Et si votre blog avait une barre de menu qui au lieu d’afficher le titre d’une section, afficherait plutôt une image ? Voici pour ceux qui seront intéressé, une astuce toute simple pour ajouter une barre de menu avec image à l’entête de son blog. Crédit de l’astuce à JIM.

1. Héberger les images à afficher sur un site comme Photo Bucket ou Picasa Web Album (ou encore sur Google Page creator).

2. Aller dans modèle, modifier le code html et cocher sur “Développer des modèles de gadget. Ajoutez le code suivant juste avant : ]]></b:skin> :

/* Header */

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

2. Allez sur modèle, éléments de la page et juste après l’entête cliquez sur « ajouter un nouvel élément » et sélectionnez « HTML/JAVASCRIPT » dans la pop-up qui s’ouvrira. Ajoutez-y le bloc de code en prenant soin de replacer les éléments nécessaires :

<div id='newnavbar'>
<ul>
<li><a href="URL de la page d’accueil "><img src="URL de l’image correspondante"></a></li>
<li><a href="URL du menu n° 1 "><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL du menu n° 2"><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL du menu n° 3"><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL du menu n° 4"><img src=" URL de l’image correspondante "></a></li>
<li><a href="URL pour le contact"><img src=" URL de l’image correspondante "></a></li>
</ul></div>

4. Enregistrez votre modèle et allez voir le résultat.

Voyez Imessenger qui utilise cette métode

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.