TUTORIAL™

--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--
Apa kabar semoga sobat semuah dalam keada'an sehat2 semuah Kerja'anpun lancar Jaya Amin.
Seperti biasa sobat kami mau berbagi sedikit Tutorial buat Blog sobat semuah yang
ingin Memasang Menu buat Memudahkan pengunjung Blog kita mudah mencari Artikel yang.
Dan kali ini kami mau berbagi Cara Membuat Menubar Dengan Control Panel
Buat sobat yang mau lihat Demo sobat bisa liat di Linik Bawah

Coba sobat Diklik maka akan
terlihat Cara Membuat Menubar Dengan Control Panel..

Buat sobat yang mau pasang silakan Kopy Kode di bawah ini pas di bawah </b:skin>

 
#menuwrapperpic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSqWihHW5AwSlGHrPJ66SJhNC_wJGAukksYx80APTQzvzxe64TMAm7NV1f6soP3pJclJX18ewc682a_ZWgnDy0PHvdbRM_aitMB3OeIZ00fNIPjjTtHhpjWGofVFdu4YVnDVlIPfFcFxyu/s1600/menu.png) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin:0 auto}.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN3N6ivbPjk2jnj1OsK_sZMYt0RRC-vlcHsLayqlhmTIZ3EvIA2L4FFbYySJx9gQYWyCm_D46cSASkDfdLzVjT6ofvSCS97nfnmGLgcB-Min2asnGYBIMt-f9BIx9bzdjIQtFJhzX5IHOp/s1600/menubar.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #04498a;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtzSYQVevKExkziaXykniBw41HLhFQSKgSGY9Wqbvf1itqkqgf1Ia42_-4EhVXF7SYi0_gw99xS5bdLJx48Tsrm-QhVHT-GU906WqAgox9xnkE3NqT1m8qob0O-q__usosG_CMwLiA0SqN/s1600/menubar.png) repeat-x}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}#menubar li ul{z-index:100;position:absolute;display:none;background:#222;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{color:#ff0}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background:#1e70bc;text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #2386e1;border-top:1px solid #175690;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#nav-wrapper{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCyh0t3qLmPOMarETiTnfonz60AtdhdQb2cWuvJ9OpiqLsRaONL2ZTMJWl_vjE8Z0OHYPQEsmUzoArt8kobt8jRIafKtSSDXTtGTDiPWwpTWP_n6td4R8QXj7aMN2yV-5eS_-EjmzUr0Lu/s1600/nav-bg.png) repeat-x top;height:30px;font-family:Arial;overflow:hidden;}
#nav{margin:0 auto;width:980px;height:30px;padding:0}
#nav ul{float:left;width:auto;height:30px;margin:0;padding:0;list-style-type:none}
#nav ul li{float:left;height:30px}
#nav ul li a,#nav ul li a:visited{float:left;height:30px;padding:7px 10px;color:#000;font:bold 12px Arial;text-transform:none}
#nav ul li a:hover,#nav .selected{color:#626262;text-decoration:none;}
#panelutta {display:block;}#panel {background-color:#CF4C23;border:2px solid#CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}.tombolpanel{position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background:#1e70bc;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}.tombolpanel:hover {color:#ccc;}.tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#1e70bc #1e70bc transparent #1e70bc;} 

Buat Div dan Html nya sobat bisa pasang Kode di bawah ini pas di bawah Kode <body>

 
<div id='panelutta'>
<div id='panel'>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://www.bloggertutoria.com/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi51sKybucEdXmzBO2pFsI4AlJtjjXhPp4GYlQDOBJIGTBcHhoQtOUoHwq4oArXYJxF9beqtaki6rppvxehj9LXQCJiHCF16HYaYXO13Ubhsy_l0-R06vqoqqLmKdU2lNTEfnlVR3Qhurt/s1600/home_white.png' style='padding:0px;'/></a></li>
<li><a href=''>Munsypedia</a></li>
<li><a href=''>Daftar Isi</a></li>
<li><a href='#'>Hubungi Kami</a>
<ul>
<li><a href='https://plus.google.com/116430801090355917573'>Google +</a></li>
<li class='hr'></li>
<li><a href='http://www.facebook.com/selladrt'>Contact on Facebook</a></li>
<li class='hr'></li>
<li><a href='https://twitter.com/selladrt'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='http://'>Misteri Dunia</a></li>
<li><a href=''>Boxriborn</a></li>
<li><a href=''>Follow Me</a></li>
<li><a href='http://'>VHIBLUES</a></li>
<li><a href='#'>Menu Spesial</a>
<ul>
<li><a href='http://'>Misteri</a></li>
<li class='hr'></li>
<li><a href='http://'>Komputer</a></li>
<li class='hr'></li>
<li><a href='http://'>Legenda</a></li>
<li class='hr'></li>
<li><a href='http://'>Tokoh</a></li>
<li class='hr'></li>
<li><a href='http:'>Unic</a></li>
</ul></li></ul><br class='clearit'/>
</div><div style='clear:both;'></div>
</div></div></div><div class='tombolpanel'>
<span class='in'>Buka Untuk Mencari menu Yang Lain Di Sini Bos....?</span>
<span class='in' style='display:none;'>Tutup Bos.......?a</span>
</div></div> 

Kalu Langkah di atas suda sobat tinggal Pasang kode Javascript 
pas di atas kode </head>

 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
     $('.tombolpanel').click(function() {
          $('#panel').slideToggle('slow');
          $('.tombolpanel span.in').toggle();
     });
});
</script> 

Lalu simpan Lihat hasilnya

Sekian dulu dari kami semoga Postingan
Cara Membuat Menubar Dengan Control Panel
bisa berguna buat sobat yang membutuhkannya Amin...?