barre de liens horizontale (5) a onglets arrondis

obtenir ces boutons

Ajouter une barre de liens horizontale (5)
avec des onglets arrondis : 3 méthodes




Il est facile de créer une barre de liens avec des onglets arrondis (voir ci-dessus), comme celles qui sont produites par l'outil de création de modèles de Blogger.

Comme avec cet outil, les arrondis n'apparaissent qu'avec les navigateurs autres qu'Internet Explorer, et le mot "Accueil" ne change pas de couleur au passage du curseur de la souris.

ON PEUT MÊME TRANSFORMER CETTE BARRE DE LIENS EN MENU DÉROULANT : trois exemples figurent ici. Pour obtenir les codes, cliquer ici.

Autre présentation :



* * * * *
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;padding-left:5px}

#LinkList1 li {float:left;color:transparent;padding:0px 2px;}

#LinkList1 a {
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
border:solid 1px #aaa;
border-bottom:none;
color:white;
background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
text-decoration: none;display:block;padding:5px 16px; font-size: 18px;font-weight:bold;font-family: arial;
}

#LinkList1 a:hover
{color: #191970;z-index: 1;
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;
}

</style>


* * * * *
Une seconde méthode pour obtenir la barre de liens affichée au début de l'article est de coller le code qui suit dans un seul gadget HTML/JavaScript:

<! barre liens horizontale onglets arrondis 1 by renévandemaele in "http://modifier-les-modeles-de-blogger.blogspot.com/"><div class="blharr1">

<li><a style="color: #191970;background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;"
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">

.blharr1{margin-left:35px;padding-left:5px}

.blharr1 li {float:left;color:transparent;padding:0px 2px;}

.blharr1 a {
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 0;
-goog-ms-border-top-left-radius: 10px;
-goog-ms-border-bottom-left-radius: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-goog-ms-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}

.blharr1 a {
border:solid 1px #aaa;
border-bottom:none;
color:white;
background: transparent url(http://www.blogblog.com/1kt/transparent/black50.png) repeat scroll top left;
text-decoration: none;display:block;padding:5px 16px; font-size: 18px;font-weight:bold;font-family: arial;
}

.blharr1 a:hover
{color: #191970;z-index: 1;
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll bottom;
}

</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.

* * * * *


Une 3° méthode superposant des images, fonctionne tant avec Internet explorer qu'avec Firefox (voir ci-dessus). Elle est moins rapide à mettre en place car il faut créer deux images aux couleurs du blog.

Le code utilisé est le suivant :
<style type="text/css">.blharr{margin:0;margin-left:0px;padding:0;}.blharr li{float:left;display:inline;background:#eee url(http://4.bp.blogspot.com/_sPwH_KmuNT8/TR9V8KkOVCI/AAAAAAAAAv4/TwMamvcNW8I/s200/onglet%2Barrondi%2Bgauche.PNG) no-repeat left top;border:none;}.blharr li a {font-size:18px;font-family:arial;padding:3px 20px;background:url(http://3.bp.blogspot.com/_sPwH_KmuNT8/TR9V2brs5XI/AAAAAAAAAvw/l-3XHRJsxFU/s200/onglet%2Barrondi%2Bdroit.PNG) no-repeat right top;float:left;font-weight: bold;color:white; text-decoration: none;margin: 0;}.blharr li a:hover {color:black;}</style>
<! barre liens 3 horizontale onglets arrondis copyright renévandemaele in "http://modifier-les-modeles-de-blogger.blogspot.com/"><div class="blharr" style="margin-left:0px;"><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 1</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 2</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 3</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 4</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 5</a></li><a href="http://modifier-les-modeles-de-blogger.blogspot.com" style="display:none;">blogger</a></div>
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 (onglet 1, ... ) qui apparaissent à l'écran.
* * * * *
On peut aussi éloigner les onglets et les relier par une barre horizontale inférieure comme dans cet exemple :


Le code utilisé est le suivant :
<!--[if IE]><div style="margin:13px 0px 0px;"></div><![endif]--><! barre liens horizontale 3 onglets arrondis soulignés copyright renévandemaele in "http://modifier-les-modeles-de-blogger.blogspot.com/"><div id="fond-barre" style="margin-left:0px;"><span id="blharrsoul" style="display:inline;margin-left:20px;"><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 1</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 2</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 3</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 4</a></li><li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">onglet 5</a></li></span></div></!><style type="text/css">#fond-barre{padding-bottom:6px;width:566px;margin-top:0px;border-bottom:4px solid rgb(136,153,170)}#fond-barre{/padding-bottom:0px;}#blharrsoul{margin:0;padding:0;}#blharrsoul li{margin-left:1px;float:left;display:inline;background:#eee url(http://4.bp.blogspot.com/_sPwH_KmuNT8/TR9V8KkOVCI/AAAAAAAAAv4/TwMamvcNW8I/s200/onglet%2Barrondi%2Bgauche.PNG) no-repeat left top;}#blharrsoul li a {font-size:18px;font-family:arial;padding:3px 21px 3px;background:url(http://3.bp.blogspot.com/_sPwH_KmuNT8/TR9V2brs5XI/AAAAAAAAAvw/l-3XHRJsxFU/s200/onglet%2Barrondi%2Bdroit.PNG) no-repeat right top;float:left;font-weight: bold;color:white; text-decoration: none;margin: 0;}#blharrsoul li a:hover {color:black;}</style>
Pour déplacer la barre vers la droite, modifier "0px" au début dans l'instruction suivante :
<div id="fond-barre" style="margin-left:0px;>
* * * * *
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.

En savoir plus :

1) La technique utilisée consiste à superposer deux images, une à gauche et l'autre à droite. La largeur du mot éloigne les images l'une de l'autre.

2) On peut remplacer les images par d'autres de n'importe quelle couleur.

Le site http://wigflip.com/cornershop/ permet de créer ces images en ligne.

Il faut définir la couleur de la boîte, la couleur de la page, la taille de l'arrondi (par exemple 10 pixels) et Transparent = None.

Sauvegarder ensuite les 4 images *.gif obtenues sur le disque dur.

Elles peuvent être hébergées sur Picasa comme les autre images utilisées par Blogger.

* * * * *
Autre page à consulter :

Afficher une barre de liens en permanence

Template image by Sookhee Lee. Powered by Blogger.

Aucun commentaire: