Barre de liens horizontale (3)

obtenir ces boutons

Ajouter une barre de liens horizontale (3)





On peut facilement ajouter cette barre de liens horizontale sur un blog. Les liens changent de couleur quand on passe au-dessus avec le curseur de la souris.

* * * * *
Une première méthode pour obtenir la barre de liens affichée au début de la page est d'utiliser le gadget "Liste de liens" de Blogger et d'y ajouter une mise en page.

Ses limites sont les suivantes :
- les liens ne s'ouvrent pas dans des autres fenêtres (sauf si tous les liens du blog le font), et, en fermant les pages accessibles par les liens, on quitte aussi le blog ;
(comment ouvrir tous les liens d'un blog dans une nouvelle fenêtre)
- tous les onglets ont la même présentation.

Méthode :

1°) Depuis le "Tableau de bord", cliquer sur "Mise en page", et sur "Ajouter un gadget". Choisir une "Liste des liens", la compléter et enregistrer.

Avec les petites flèches à côté des liens, on peut modifier le classement des liens.

Déplacer ensuite le gadget en-dessous de l'entête.

2°) Tester pour voir si la présentation convient.

Sinon, ajouter sur le blog un gadget HTML/JavaScript contenant le code de mise en page repris ci-dessous. La barre de liens aura la même présentation que celle qui se trouve au début de la page.

Comment ajouter un gadget HTML/JavaScript sur un blog.

<style type="text/css">#LinkList1{margin-left:35px;line-height: 18px;
text-align: center;padding: 0;margin: 0;}

#LinkList1 li{float: left;list-style:none;}

#LinkList1 a {border-right: 1px solid #000;border-bottom: 1px solid #000;padding:7px 16px; display:block;background:#ddd;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;color:#191970;}

#LinkList1 a:hover{color:white;background:blue;}</style>

* * * * *
Une seconde méthode permet d'ajouter une barre de liens comme celle qui figure en haut de la page. Il suffit de placer dans un gadget HTML/JavaScript le code suivant :

<! barre liens 1 horizontale 2010 copyright renévandemaele in "http://modifier-les-modeles-de-blogger.blogspot.com/"><div class="blh11"><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></div>

<style type="text/css">
.blh11{margin-left:35px;line-height: 18px;text-align: center;padding: 0;margin: 0;}

.blh11 li{float: left;list-style: none;}

.blh11 a {border-right: 1px solid #000;border-bottom: 1px solid #000;padding:7px 16px; display:block;background:#ddd;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;color:#191970;}

.blh11 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:35px;").

On peut remplacer les fonds gris des liens par des images comme dans les exemples au début de cette page. Pour cela il a suffi de remplacer :

background:#ddd;

par :

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 ("blh11" devenant par exemple "blh11m") 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.

* * * * *
Autre page à consulter :

Afficher une barre de liens en permanence

10 commentaires:

Isaius a dit…

Hello,
Exactement ce que je cherchais !
Merci !!!

Valentine a dit…

merci !

InconnuDeLuxe a dit…

Merci pour ce tuto très utile!
Est il possible de remplacer le nom du bouton ACCEUIL par exemple par un logo du genre celui de Youtube pour rendre plus armonieux le tout?

Meiser a dit…

Consulter cette page :

http://modifier-les-modeles-de-blogger.blogspot.com/2009/12/remplacer-messages-plus-recents-accueil_31.html


Anonyme a dit…

Est ce que vous pourriez me dire comment est ce que je peux faire pour écrire un article dans un des liens? Parce que j'ai fait tout ce que vous avez dit de faire et ça marche bien mais lorsque je poste un article, il apparait sous tous les onglets... Comment faire pour qu'il apparaisse juste sous l'onglet du menu souhaité?
Merci d'avance !

Meiser a dit…

Avec cette barre de liens , il suffit

1) de remplacer un des codes

"http://modifier-les-modeles-de-blogger.blogspot.com/"

par l'adresse (à copier en haut de l'écran) de la page que l'on souhaite afficher;

2) de remplacer "Contact 1" ... par les mots que l'on veut.


Marazzam a dit…

Je n'arrive pas à changer la police, la couleur de l'arriere plan et la couleur de la police, comment faire ?

Meiser a dit…

On peut très facilement adapter la présentation :
- couleur de fond : "background:..."
- couleur des caractères : "color:..."
- on peut ajouter une police de caractères après "color:..."
- ...

#blh1 ul{font-size:large;font-family:arial;}
#blh1 li{display: inline;border-style: solid; border-color: #BBB; border-width: 1px 1px 1px 1px;background:#eee;padding: 4px 19px;}
#blh1 li a {font-weight: bold;color: #000; text-decoration: none;}
#blh1 li a:hover {color: #88bb22;}


RAE-TON a dit…

j'aimerais savoir comment ont fait pour changer lien1, lien2, lien3,etc.. par des images si c'est passibles ?!

Meiser a dit…

Bonjour.

Il suffit de remplacer les mots "LIEN1" ... entre les balises <a> et <a> par :

<img src="http://....." alt="" border="0" style="margin: 0pt 0pt 0px 0px; width: 50px; height: 26px;" />