barre de liens verticale (1)

obtenir ces boutons

Ajouter une barre de liens verticale (1)
On peut facilement installer cette barre de liens verticale dans les colonnes latérales d'un blog.
Il suffit de placer dans un gadget HTML/JavaScript le code suivant :

<div class="blv11" style="margin-left:150px;"><ul><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">ACCUEIL</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 2</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 3</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 4</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5</a></li>

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">CONTACT</a></li></ul>

<a href="http://modifier-les-modeles-de-blogger.blogspot.com" style="display:none;">blogger</a></div>

<style type="text/css">

.blv11 li{width:100px;list-style:none;text-align: center;display: block;margin: 0px;margin-bottom: 1px;background:#eee;border:none;}

.blv11 li a {width:100px;border-right: 1px solid #000;border-bottom: 1px solid #000;padding:3px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;color:#191970;background:#ddd;}

.blv11 li a:hover {color:white;background: blue;}</style>

IMPORTANT : si on insère dans un blog plusieurs barres de liens, on ne doit mettre qu'UNE SEULE FOIS DANS UN CODE LA MISE EN PAGE comprise entre <style type="text/css"> et </style>. Elle s'appliquera automatiquement à tous les boutons.

Le code a été testé pour Firefox et Internet explorer.

Il peut être installé en quelques secondes et testé par chacun.

Comment ajouter un gadget HTML/JavaScript sur un blog.

Chacun remplacera les liens au début du code, par les adresses (http://...) qui lui conviennent : vers l'intérieur (page, libellé, ...) ou l'extérieur du blog.

Il faudra aussi modifier les significations des liens (LIEN 2, ...) qui apparaissent à l'écran.

* * * * *
Pour utiliser cette barre de liens AVEC LES NOUVEAUX MODÈLES DE BLOGGER, consulter cette page.

* * * * *
On peut augmenter ou diminuer le nombre de liens.

Le code target="_blank" ouvre le lien dans une nouvelle fenêtre. Cela concerne les liens extérieurs au blog, afin que les lecteurs reviennent automatiquement au blog de départ après lecture.

On peut modifier le code pour changer la présentation : couleur du fond, taille des caractères , ....

On peut modifier l'espace à gauche de la barre ("margin-left:67px;").

* * * * *
On peut remplacer les fonds gris des liens par des images (vertes dans l'exemple en haut de la page). Pour cela il suffit de remplacer :

background:#ddd;

par, par exemple, :

background:url('http://storage.canalblog.com/27/32/794548/58887868.jpg') no-repeat;

* * * * *
On peut aussi installer la barre de liens dans un message, en supprimant tous les espaces entre les instructions. S'il y a une barre du même type dans un gadget, changer le nom de la barre ("blv1" devenant par exemple "blv1Mess") pour éviter de modifier la présentation des deux barres. Si une barre verticale est déjà installée, il ne faut coller le code de la mise en page (entre <style type="text/css"> et </style>) qu'une seule fois.

3 commentaires:

Alexandre Martinez a dit…

Bonjour,
J'ai essayé cette barre de lien sur mon blog et ca fonctionne super.
Néanmoins j'aurai souhaité savoir si avec ce modèle, on pouvait adapter des sous-menus?
Voici l'adresse de mon blog.
www.becia.org

Meiser a dit…

Bonjour.

Le code est disponible à la page suivante.


Blanche Burlin-Pezet a dit…

Bonjour,

je souhaite avoir un background de couleur sur la page active pour ce menu vertical. Est-ce possible?

Merci d'avance.