Barre de menu avec image

By
Advertisement



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.


7 commentaires:

  1. Merci pour tt ces inos. en revanche je ne comprends pas mon pb( rien a voir avec ce post mais bon).
    Quand je place une image ds mon en tête elle prend tt la largeur.
    Quelqu'un pourrait-il m'aider?
    voir ici:
    http://culturemaroc.blogspot.com/

    RépondreSupprimer
  2. Au secoursRodney!!! Ma barre de menu n'est pas allignée! Peux-tu m'aider? Merci

    RépondreSupprimer
  3. merci pr ce post !! génial !

    par contre une question : peut on l'afficher just en dessous de l'entete, en tant q "navbar" ?! (pke sur le coté c pas top !).

    merci par avanceeeeeeee !!!

    et continu ! c top !

    RépondreSupprimer
  4. @ advertais : c'est possible. Lis l'article ajouter un élément à l'entête pour voir comment faire.

    RépondreSupprimer
  5. Je ne trouve pas "]]> :" Help! x)


    merci d'avance!!

    RépondreSupprimer
  6. ses pas vrai sa ma foutu tout mon blog en laire vien chez moi le faire ;)

    RépondreSupprimer
  7. http://parisianwear.blogspot.com/

    RépondreSupprimer

Salut Cher Lecteur.

Bien que les commentaires ne sont pas modérés en amont, ne perdez pas votre temps à mettre des commentaires sans aucun lien avec l'article. Ils seront effacés.

Ne venez surtout pas mettre des commentaires bidons pour promouvoir les sciences occultes ici (voyance, magie, etc.), vérifiez le blog, aucun commentaire de ce genre n'a résisté à la gomme de l'administrateur.

Bon, ceci étant dit, puissiez-vous respecter les lois de votre pays, les lois universelles ainsi que le bon sens en postant votre commentaire sur ce blog.

Remarque : Seul un membre de ce blog est autorisé à enregistrer un commentaire.

@ Blogger au bout du doigt. Fourni par Blogger.

SEO & REFERENCEMENT