Vous voulez ajouter un menu spécial à votre blog? Voici un menu concocté pour vous et qui vous permettra d'afficher un menu vertical à votre blog qui s'ouvre au passage de la sourie.




Installation

---

Etape 1

---

1. Connecter vous à http://draft.blogger.com/
2. Cliquez sur ajouter un gadget ==> cliquez sur  HTML/JavaScript
3. Copiez le code suivant puis coller

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF-qKBKnQ1-os7kY8fY7SqNxTzL-JJgSdRz7yjMld0z-6QqTXJo-9_5-4r7mdxYuMVjXAg90ia7ZoV40S3S8najj7E3V1ICIuIeXL1VyyHsN5RYpgMTQeCuqwhlLR4a6wUEq4FtQiQ5IM/w59-h272-p-k/menu1.jpg") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><div class="v20bl">
<li><a href="#">ACCUEIL</a></li>
<li><a href="" target="_blank">LIEN a</a></li>

<li><a href="" target="_blank">LIEN b</a></li>
<li><a href="" target="_blank">LIEN c</a></li>

<li><a href="" target="_blank">LIEN d</a></li>


<li><a href="" target="_blank">Lien e</a></li>
<li><a href="" target="_blank">Lien f</a></li>
<li><a href="" target="_blank">Lien g</a></li>

<a href="" 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/AVvXsEiIaEB8eI-1869fhb0d3MDO8wX9OINgrAHYqo8t4rQcDRAFYG0gQTDLGHcw5ycie0cUkZDe4OBwT6U2LXYSkIntyDT7n9RMwAT92IsskgLhUMkJC2rTmNHVMrwHOSrPJxrer016QiI-q1g/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:orange;}
.v20blfixe a:hover {color:orange;
background:rgb(38,66,80) url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIaEB8eI-1869fhb0d3MDO8wX9OINgrAHYqo8t4rQcDRAFYG0gQTDLGHcw5ycie0cUkZDe4OBwT6U2LXYSkIntyDT7n9RMwAT92IsskgLhUMkJC2rTmNHVMrwHOSrPJxrer016QiI-q1g/s400/onglet+fond+bleu+3.PNG') no-repeat;}
</style></div></div>

---

Etape2

---

Modification du code

Les lignes en couleur sont à  modifier à  votre guise.
 La ligne en bleu: indique le lien de l'image suivante: Menu
 Les lignes en rouge indiquent les liens des menus à modifier si vous le souhaiter

Vous avez trouvé intéressant cet article? Partagez-le.
Aussi laisser toutes remarques, suggestions et question dans les commentaires.

Astuces similaires : Astuces, Gadgets, Menu vertical, Widget