Supprimer la barre de navigation Blogger en haut de l'écran - Changer sa couleur

Pour changer la couleur de la barre de navigation Blogger, il suffit de placer le code ci-dessous dans la partie centrale en CSS (mise en page) du template : #navbar-iframe { background-color:red;}
(soit rouge avec cet exemple).

Les couleurs sont identifiées par :
- un nom : par exemple : "red" ;
- un code "rgb" (red-green-blue) : par exemple "rgb(255, 102, 102)";
- un code hexadécimal : par exemple "#9BC3D5" (en 6 ou 3 chiffres).

Pour consulter (en français) une liste alphabétique de couleurs et les codes correspondants (hexadécimal et rgb) : cliquer ici.

* * * * *

On peut avoir envie de supprimer la barre de navigation de Blogger (en haut de l'écran) pour 2 raisons :
- le côté "blog" et moins professionnel donné au "Blog" ;
- elle permet de passer trop facilement à un autre blog et donc de quitter trop rapidement le premier blog.

1) Une première méthode pour supprimer cette barre consiste à ajouter le code qui suit dans un gadget HTML/Javascript (cela évite de modifier le "modèle" ou "template"):

<style type="text/css">#navbar-iframe {display: none;}</style>

Pour savoir comment créer un gadget HTML/JavaScript : cliquer ici.

Remarque : d'autres instructions peuvent être ajoutées dans le même gadget entre <style type="text/css"> et </style>.

2) Une seconde méthode consiste à ajouter dans le modèle (template) du blog:

#navbar-iframe {display: none;}

juste avant

]]></b:skin>.

Rappel : Comment modifier un template (modèle).

* * * * *

Cela n'empêche pas de créer ou de modifier des messages, et de modifier le "modèle" (template) : il suffit de passer par le "Tableau de bord" de Blogger et de cliquer au choix sur "Nouveau message", "Présentation" ou "Modifier les messages", à côté du nom du blog concerné.

Ajouter une barre de liens déroulante verticale

On peut placer dans une colonne latérale un simple bouton ou plusieurs boutons superposés qui donnent accès à des colonnes de liens supplémentaires. Cliquer ici pour tester EN BAS DE PAGE cette barre de liens déroulante verticale.


TOUTES LES COULEURS SONT POSSIBLES.

* * * * *

Le code nécessaire est le suivant :

<div class="v20bl">

<li><a href="#">ACCUEIL</a></li>

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

<li><div class="v20blfixe"><a href="#">LIEN 3</a></div><ul>

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

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

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

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

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

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

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

<li><div class="v20blfixe"><a href="#">LIEN 4</a></div><ul>

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

<li><div class="v20blfixe"><a href="#">LIEN 4.2</a></div><ul>

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

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

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

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

<li><div class="v20blfixe"><a href="#">LIEN 4.4</a></div><ul>

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

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

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

<li><div class="v20blfixe"><a href="#">LIEN 5</a></div><ul>

<li><div class="v20blfixe"><a href="#">LIEN 5.1</a></div><ul>

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

<li><div class="v20blfixe"><a href="#">LIEN 5.1.2</a></div><ul>

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

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

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

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

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

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

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

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

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

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

<li><a href="http://radios-en-ligne.blogspot.com/" target="_blank">Radios</a></li>

<li><a href="http://televisions-en-ligne.blogspot.com/" target="_blank">Télévisions</a></li>

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

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

</div>

<style type="text/css">
.v20bl, .v20bl ul{list-style: none;text-align: center;z-index:999;padding: 0;margin: 0;vertical-align:baseline;}
.v20bl{margin-left:0px;margin-top:0px;width:125px;}
.v20bl li{float: left;}
.v20bl li ul{position: absolute;width: 125px;left: -999em;z-index:999;}
.v20bl li:hover ul ul {left: -999em;}
.v20bl li:hover ul ul ul{left: -999em;}
.v20bl li:hover ul, .v20bl li li:hover ul,.v20bl li li li:hover ul{left: auto;min-height:1%;}
.v20bl ul li {list-style: none;vertical-align:baseline;}

.v20bl li ul {border-top: 1px solid rgb(38,66,80);border-right: 1px solid rgb(38,66,80);width:144px;}

.v20bl li ul {margin: -34px 0 0 144px;min-height: 0;}

.v20bl a {color:white;
background:rgb(38,66,80) url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNaRrfES3GkYR1W0TQlIJ4tCNMeMtW_FjXJ243uEEHszzDS8UlZNoJAcrWktEXyCfSyNHdfGI3B328b6iv7Kgfy4NOlyMreu1bU-nJ2qOmK3nkAppKn5JloRiZkH896GKOvxiXj6vHyY/s400/onglet+fond+bleu+3.PNG') no-repeat;border-bottom: 1px solid rgb(38,66,80);border-left: 1px solid rgb(38,66,80);padding:7px 9px; display:block;text-decoration: none; font-weight:bold;font-family: arial;font-size: 18px;line-height: 18px;width:125px;}

.v20bl a:hover{color:#191970;background:white;}

.v20blfixe a:hover {color:white;
background:rgb(38,66,80) url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNaRrfES3GkYR1W0TQlIJ4tCNMeMtW_FjXJ243uEEHszzDS8UlZNoJAcrWktEXyCfSyNHdfGI3B328b6iv7Kgfy4NOlyMreu1bU-nJ2qOmK3nkAppKn5JloRiZkH896GKOvxiXj6vHyY/s400/onglet+fond+bleu+3.PNG') no-repeat;}
</style>

Il suffit d'insérer ce code dans un gadget HTML/JavaScript : ON ÉVITE AINSI DE TOUCHER AU MODÈLE - TEMPLATE. Le code a été testé avec Firefox et Internet explorer 7.

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

Comment ajouter un gadget HTML/JavaScript sur un blog.

On ajoute un espace à gauche en corrigeant : .v20bl{margin-left:0px;

Chacun remplacera les liens par les adresses (http://...) qui lui conviennent : vers l'intérieur (page, libellé, ...) ou l'extérieur du blog. 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.

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

* * * * *

POUR UTILISER CETTE BARRE DE LIENS DÉROULANTE DANS UNE COLONNE LATÉRALE DROITE, les sous-menus doivent s'afficher A GAUCHE de la barre de liens verticale.

Il faut donc corriger l'instruction
.v20bl li ul {margin: -34px 0 0 144px;min-height: 0;}
en remplaçant 144px par -146px.

* * * * *

Cette barre de liens NE FONCTIONNE PAS AVEC LES TEMPLATE (MODÈLES) DE 2010 DE BLOGGER.

* * * * *

On peut installer plusieurs barres de liens déroulantes verticales sur un blog.

Dans ce cas, il ne faut publier qu'une seule fois la dernière partie du code située entre <style type="text/css"> et </style> : la "feuille de style" concernée s'appliquera à toutes les barres verticales.