code menu deroulant template blogger 2010

obtenir ces boutons


Menu horizontal déroulant pour les
templates de 2010 de Blogger :
sous-menu vertical

Conseils de mise en œuvre pour toujours pouvoir revenir en arrière en cas de problème :
- Créer un second blog pour tester les modifications.
- Sauvegarder une copie du template.
- Déplacer la barre de liens existante dans la colonne latérale (avec l'écran "Mise en page").

Le code pour obtenir cette barre de liens bleue est le suivant :

<script src='https://sites.google.com/site/rvdmarcrailcatrain/home/d20bl.js'
type='text/javascript'></script>

<!--Barre de menu horizontale-->

<div id="ddtopmenubar" class="d20bl-barre">

<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="#" rel="ddsubmenu1">LIEN 3 &#x2193;</a></li>

<li><a href="#" rel="ddsubmenu2">LIEN 4 &#x2193;</a></li>

<li><a href="#" rel="ddsubmenu3">LIEN 5 &#x2193;</a></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>

</ul>

</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<!--sous-menu 1-->

<ul id="ddsubmenu1" class="d20bl">
<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>

<!--sous-menu 2-->

<ul id="ddsubmenu2" class="d20bl">

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

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

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

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

</ul>

<!--sous-menu 3-->

<ul id="ddsubmenu3" class="d20bl">

<li><a href="http://modifier-les-modeles-de-blogger.blogspot.com/" target="_blank">LIEN 5.1</a></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>

<style type="text/css">
.d20bl, .d20bl div{visibility: hidden;z-index: 100;}
.d20bl ul,.d20bl, .d20bl div{margin: 0;padding: 0;position: absolute;left: 0;top: 0;list-style-type: none;}
.d20bl li a{display: block;width: 170px;}
* html .d20bl li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.downarrowpointer,.rightarrowpointer{display:none;}


.d20bl-barre {margin-left:30px;}

.d20bl-barre a,.d20bl a {color:white !important;
background:rgb(38,66,80) url('http://1.bp.blogspot.com/-yaeJ3oXQ2pc/TqVNe1XGfpI/AAAAAAAAA3M/-XMh8wD3WvM/s400/onglet%2Bfond%2Bbleu%2B3.PNG') no-repeat;border: 1px solid rgb(38,66,80)!important;padding:8px 14px!important;text-decoration: none; font-weight:bold !important;font-family: arial!important;font-size: 14px !important;line-height: 18px !important;}

.d20bl-barre a:hover,.d20bl a:hover{color:black !important;background:white !important;}

</style>

<!--[if IE]><style type="text/css">.d20bl{margin-left:0px;}</style><![endif]-->

4 commentaires:

adamaseck44 a dit…

je suis toujour bien orianter par groupe aider nouvaux blogger je remerci google et tous le groupe blogger

maurice a dit…

Bonjour,

Merci pour ce code qui correspond à ce que je voulais faire. Ceci fait taire ce qui se dit sur le forum d'aide de blogger à longueur de temps, à savoir: "pas de menu déroulant possible".....

Bernard Sublet a dit…

Bonjour,
Je viens de mettre en place un menu déroulant en déposant le code comme vous l'indiquez et tout allait bien. J'ai fait des modifications de couleur de fond en collant les codes adéquats sans soucis mais il se passe que le déroulement des menus est très aléatoire. quand je passe la souris dessus, le menu se déroule mais disparaît avant que j'ai eu le temps de sélectionner une ligne.
J'ai bien veillé à ne bouger aucun autre attribut dans les codes en modifiant mais le résultat est perturbant !
Merci si vous pouvez m'aider

GUIMAR a dit…

le menu déroulant s'affiche verticalement avec des points devant chaque onglet ? Les sous menus sont eux bien verticaux et fonctionnent parfaitement.