barre de liens horizontale (4)

obtenir ces boutons

Ajouter une barre de liens horizontale
en haut de l'écran (4)







Cette barre existe aussi en menu déroulant avec des sous-menus et des sous/sous-menus : cliquer ici. EXEMPLES.

On peut facilement installer en haut de l'écran, une barre de liens horizontale, comme celles qui figurent ci-dessus. Quand on survole un des liens avec le curseur, la couleur de la ligne inférieure remonte pour couvrir l'arrière du mot. TOUTES LES COULEURS SONT POSSIBLES.

* * * * *
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 {font-size:18px;font-family:arial;padding:0px;}
#LinkList1 li{float:left;display: inline;padding:2px 5px;border-style: solid; border-color: #BBB #BBB rgb(51, 102, 255); border-width: 1px 0px 8px 0px;background:#eee;}
#LinkList1 li a {font-weight: normal;padding: 5px 10px;color: #000; text-decoration: none;}
#LinkList1 li a:hover {padding: 4px 10px;color: white;background:rgb(51, 102, 255);}</style>

* * * * *
Une seconde méthode permet d'ajouter une barre bleue de 6 liens dans un blog : insérer le code suivant dans un gadget HTML/JavaScript :
<! barre liens 2 horizontale copyright renévandemaele in "http://modifier-les-modeles-de-blogger.blogspot.com/">

<div class="blhor22" style="text-align: left;margin-left:0px;">

<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">
.blhor22 {font-size:18px;font-family:arial;padding:0px;}
.blhor22 li{float:left;display: inline;padding:2px 5px;border-style: solid; border-color: #BBB #BBB rgb(51, 102, 255); border-width: 1px 0px 8px 0px;background:#eee;}
.blhor22 li a {font-weight: normal;padding: 5px 10px;color: #000; text-decoration: none;}
.blhor22 li a:hover {padding: 4px 10px;color: white;background:rgb(51, 102, 255);}</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.

Comment ajouter un gadget HTML/JavaScript sur un blog.

Si c'est nécessaire, corriger la taille des caractères (font-size:18px;).

Si le gadget n'a pas été créé en-dessous de l'en-tête, il faut le déplacer avec la souris.

* * * * *
La mise en place de cette barre de liens ne prend que QUELQUES SECONDES. Chacun peut donc la TESTER sur son blog.

* * * * *
Une fois installée, la barre de liens est ENTIÈREMENT PARAMÉTRABLE (contenu et présentation).

Chacun remplacera les liens dans le code par les adresses (http://...) qui lui conviennent : vers l'intérieur du blog (page, libellé, ... : pour récupérer une adresse on affiche la page que l'on veut atteindre et on copie l'adresse en haut de l'écran) ou l'extérieur du blog.

Il faut aussi modifier les significations de ces liens (LIEN 2, ... ) qui apparaissent à l'écran.

* * * * *
On peut déplacer la barre horizontale vers la droite en corrigeant "0px" dans l'instruction (au début) : <div class="blhor22" style="text-align: left;margin-left:0px;">. Marges et espaces : page à consulter : http://modifier-les-modeles-de-blogger.blogspot.com/2009/12/marges-et-espaces.html.

On peut changer la couleur de la barre horizontale. TOUTES LES COULEURS PEUVENT ÊTRE CHOISIES.

Le "bleu électrique" est déterminé (2X) par le code "rgb(51, 102, 255)".

Pour consulter une liste alphabétique de couleurs et les codes correspondants : cliquer ici.

La distance entre les liens peut être adaptée : corriger le deuxième nombre après "padding:" (le premier nombre concerne l'espace au-dessus et en-dessous).

La couleur de fond des liens est déterminée par "background:#eee;" = gris très clair. Elle peut être modifiée. Par exemple, pour obtenir un gris de plus en plus foncé, remplacer les "e" par d, c, b, a, 9, 8 ...

Le code target="_blank" ouvre la page appelée par le lien dans une nouvelle fenêtre. Cela concerne essentiellement les liens vers l'extérieur du blog, afin que les lecteurs reviennent automatiquement au blog de départ après lecture de la page appelée par le lien.

D'autres modèles de barres de liens horizontales sont présentés aux pages précédentes et suivantes.

* * * * *
On peut remplacer les fonds gris des liens par des images. Pour cela il suffit de remplacer :

background:#eee;

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 à condition de ne laisse aucun espace ni saut de ligne entre les instructions.

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

* * * * *
Autre page à consulter :

Afficher une barre de liens en permanence

11 commentaires:

Denis Caspar a dit…

Bonjour,
Je trouve ces informations formidables. J'avoue ne pas y connaitre grand chose, et je suis un blogger par besoin, mais là, pour une fois, j'ai presque tout pigé et j'ai réussi presque du premier coup (Ajouter une barre de liens horizontale en haut de l'écran ) . Je tenais à vous dire merci pour toutes ces formidables ( et claires) informations.Cependant, une question me tracasse, pourqoi chaque clic sur le menu ouvre une nouvelle page? et comment y remédier? je suis s^r que c'est un détail.
En tous les cas, merci pour toutes ces informations précieuses
Cordialement
Denis Caspar
denis.caspar@sympatico.ca
http://livredorlueurespoir.blogspot.com/
et
http://guerirautrement.blogspot.com/

Meiser a dit…

Comme indiqué dans le texte, target="_blank" ouvre le lien dans une autre fenêtre. On peut supprimer cette instruction. Son intérêt est que le lecteur qui ferme le message reste sur le blog au lieu de le fermer en même temps que le message.


Juliiiia a dit…

Salut merci pour ton astuce géniale

Comment on peu faire pour modifier l'espace entre chaque mot svp ?

L'espace entre par exemple Accueil et lien 1

Merci beaucoup

Meiser a dit…

1) modifier 15px
2) modifier 14px et 16 px
3) modifier les 3 dans le même sens : +1 partout ou -1 partout par exemple

padding: 6px 15px;color: #000000; text-decoration: none;}#blh2 li a:visited {font-weight: bold;padding: 6px 15px;color: #000000; text-decoration: none;}#blh2 li a:hover {font-weight: bold;color: white;background:#3366FF;padding: 5px 16px 6px 14px;


Juliiiia a dit…

Super sa fonctionne, merci Meiser pour l'astuce et pour ton aide :)

Camille a dit…

Bonjour,
je tente de changer les couleurs et style de la barre de menu que j'ai installée grâce aux explications données ci dessus.
Pour cela, je clique sur "modifier" (sur ma barre de menu), apparait ainsi une fenêtre intitulée "Configurer HTML/JavaScript". Mais là, lorsque je change les codes couleurs, ou bien les espaces entre les onglets etc et que j'enregistre, il ne se passe rien. Comment faire ?

Merci de votre aide.

Meiser a dit…

Dans le "Tableau de bord", cliquer sur :
"Présentation" (précédemment "Mise en page") ;
"Modifier" dans le rectangle qui représente le gadget concerné.

Corriger.

Enregistrer.


Camille a dit…

Merci beaucoup ! Ca y est ça marche, j'ai réussi à changer la couleur de la police.
En revanche est il possible de changer la couleur de fond de ces onglets. Ils sont blanc mais j'aimerai qu'ils soient de la même couleur que le fond d'écran, c'est à dire gris. Comment procéder ?

Meiser a dit…

background:#eeeeee; = gris très clair

changer les e par d, c, b, a, 9, 8 ... : de plus en plus foncé


will a dit…

merci de ces précieux conseils

will

Dessins Fantastiques a dit…

Bonjour, j'ai une barre de lien faite avec blogger et un template qui lui met un fond en dégradé (je sais pas si c'est clair alors je mets le lien de mon site pour que vous puissiez voir de quoi je parle : http:/www.dessinsfantastiques.blogspot.com)

Le problème c'est que ce fond part tout à droite de l'écran et va jusqu'à l'autre bout, et moi je voudrais qu'il s'arrête à peu près aux limites de la bannière de mon site.

Voici le code du background :

.tabs-outer {
overflow: hidden;
position: relative;
background: #ffffff url(//fc04.deviantart.net/fs70/f/2013/240/b/3/tabs_gradient_light6_by_dessins_fantastiques-d6k31a8.png) repeat scroll 0 0;
}

Je voudrais donc savoir comment modifier le code pour qu'il puisse être délimité des deux côtés !

Merci d'avance !