Barre de navigation avec bouton

Après la méthode pour mettre une barre de navigation horizontale sur son blog, voyons comment en mettre une horizontale mais avec boutons. Cette technique a été enseignée par Vin dans son tuto sur comment créer une page d'accueil statique sur Blogger.

Exploding boy propose une gamme variée des boutons que l’on peut utiliser pour son blog. Il faut pour cela avoir le code css nécessaire pour afficher le bouton . Après avoir choisi la marque de bouton que vous voulez afficher sur votre blog, vous pouvez en prendre le code css ici. Il vous faudra aussi héberger les fichiers des boutons dans votre compte Google page creator. Vous verrez par exemple dans le code css fournis ci-dessous l'adresse suivante : http://betabloggerfordummies.googlepages.com/tableftE.gif qui montre que le fichier gif pour le Boutons E a été hébergé sur le compte Google page creator de Vin. Les différents fichiers gif pour les boutons sont téléchargeables ici (clic droit et enregistrer sous). Après avoir héberger les fichiers sur votre compte Google page creator, vous devrez changer le yoursite.com affiché dans le lien du code css sur la page suivante par le lien que vous aurez récuperer.

1. Mettez le code css après ci-après juste avant ]]></b:skin>

/*- Menu Tabs E--------------------------- */

#tabsE {

float:left;

width:100%;

background:#000;

font-size:93%;

line-height:normal;

}

#tabsE ul {

margin:0;

padding:10px 10px 0 50px;

list-style:none;

}

#tabsE li {

display:inline;

margin:0;

padding:0;

}

#tabsE a {

float:left;

background:url("http://betabloggerfordummies.googlepages.com/tableftE.gif") no-repeat left top;

margin:0;

padding:0 0 0 4px;

text-decoration:none;

}

#tabsE a span {

float:left;

display:block;

background:url("http://betabloggerfordummies.googlepages.com/tabrightE.gif") no-repeat right top;

padding:5px 15px 4px 6px;

color:#FFF;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabsE a span {float:none;}

/* End IE5-Mac hack */

#tabsE a:hover span {

color:#FFF;

}

#tabsE a:hover {

background-position:0% -42px;

}

#tabsE a:hover span {

background-position:100% -42px;

}

Le code ci-dessus est à coller juste avant la balise ]]></b:skin>

2. Collez le code en bleu ci-après dans votre outer-wrapper :

<!-- start outer wrap -->
<div id='wrap'>

<div id='tabsE'>

<ul>

<li><a href='URL DE LA PAGE D’ACCUEIL' title='Accueil'><span>Accueil</span></a></li>

<li><a href='URL POUR CONTACT' title='Contact'><span>Contact</span></a></li>

<li><a href='URL CATEGORIE 1' title='Catégorie 1'><span>Catégorie 1</span></a></li>

<li><a href='URL CATEGORIE 2' title='Catégorie 2'><span>Catégorie 2</span></a></li>

<li><a href='URL CATEGORIE 3' title='Catégorie 3'><span>Catégorie 3</span></a></li>

<li><a href='URL CATEGORIE 4' title='Catégorie 4'><span>Catégorie 4</span></a></li>

</ul>

</div>

<!-- start header -->
<div id='header_wrap'>

Le menu apparaîtra alors au-dessus de votre entête.

3. Si par contre vous voulez l'afficher juste après l'entête, un peu comme sur ce blog, il faut coller le code soit dans un widget html que vous aurez crée juste à l'entête et placé après le titre et la description du blog, soit vous allez dans le code html du blog.

N.B. :

1. Si c’est le bouton F que vous voulez afficher, mettez le code css pour le bouton F à la première étape et changer le <div id='tabsE'> par <div id='tabsF'>. Respectez la même procédure, que ce soit pour le bouton de type A, B, C, D, etc.

2. Si au premier enregistrement, vous recevez un message d’erreur disant que l’élément de type <div> doit être fermé, ajoutez un </div> à la fin du code fournis à la deuxième étape. Si le même message d’erreur revient, ajoutez un autre </div>. Avant d’arriver au quatrième ajout, je crois qu’il sera accepté.

Vous pouvez voir le bouton E utilisé sur le blog boutique de Vin.

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.