The-Bhuz.Com: Cara Membuat Menu Drop Down dibawah atau diatas Header

Cara Membuat Menu Drop Down dibawah atau diatas Header

Posted by under Bloger, Tutorial

Cara Membuat Menu Drop Down dibawah atau diatas Header

Sahabat ane tentunya ingin mempercantik blog bukan? Nah pada kesempatan ini ane akan memberikan tutorial blogger kepada kalian mengenai Bagaimana Cara Membuat Menu Drop Down dibawah atau diatas Header?

Bagi master gak usah.. hiraukan Tips ini yeahh.....

Emm,, dengan kita menampilkan menu drop down atau menu Naik Turun dibawah Header atau diatas header, tepatnya yaitu pada judul Blog kita tentunya blog kita akan lebih keren dan lebih elegan dengan memasang widget satu ini. saya sendiri juga memasang menu drop down di blog ane! Gimana? Keren bukan? Jika kalian tertarik membuat Menu + Sub menu yang dibuat Drop Down silahkan ikuti petunjuk atau cara ane ini ya? yang hasilnya nanti seperti ini :

Woauuuww,, setelah kalian melihat gambar diatas tentunya kalian tertarik untuk membuatnya bukan?
naahh berikut caranya :

Cara Membuat Menu Drop Down dibawah atau diatas Header

Kalian harus login terlebih dahulu ke blogger
Klick Design, dan Edit HTML Cari kode ]]></b:skin>{untuk memudahkan mecari kodenya klick Ctrl + F}
letakkan kode berikut tepat Diatas kode ]]></b:skin>

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMRpACtB556JubtopIA-HlCKWpapfUumWic0nCUBd1xJkliZZbuoRhuWEFgKiOTbzilmHlkt8gdWg520qWeQnJ9XvclQm8NdNg4Xx59sDpQWcKt5yek6BtsycLbOeoNpCD_GztbIKmylw/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding: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-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjea94WgCXBSy3JDVLm3lm9Em1HwLVltRo2WcctGU27zVn-D9H0Cf2jLAb3WrC9Oy2G25OoFG1jXKmqF-biFegmD9MS-8fD2bJedC3UgPTMyWb9AeWbfvtt4ZaxFt9qJqNypc5NR2Eacuo/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #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;padding-bottom:5px;-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{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Keterangan :
Kode warna merah diatas silahkan rubah sesuai selera anda!

Selanjutnya kalian cari kode berikut:

<header> : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

<div <div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizRvt1bmV_PAIzA87Ok1TZjPwvIbbV81uaP6xFt4JW_o4dBkLZDD0HpjLx7UpyTU_Y6Schpk3JwA9wztFrNVjElUZep7dviykcM0W1dHFw4iQSR42YgjqSHVmxk39sVysklLysVY-_Rw0/s1600/home_white.png' style='padding:0px;'/>Home</a></li>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html' target='new'>Tentang Admin</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html' target='new'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Sub Menu 2</a></li>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html' target='new'>Sub Menu 3</a></li>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html' target='new'>Sub Menu 4</a></li>
</ul>
</li>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html/' target='new'>Menu</a></li>
<li><a class='trigger'>Menu Drop Down</a>
<ul>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Sub Menu 1</a></li>
<li class='hr'/>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Sub Menu 2</a></li>
<li class='hr'/>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Sub Menu 3</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Menu Blog</a>
<ul>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Blog 1</a></li>
<li class='hr'/>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Blog 2</a></li>
<li class='hr'/>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Blog 3</a></li>
<li class='hr'/>
<li><a href='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'>Blog 4</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGBDDBjDpXygYwFe5CNZrgchdLToAn1YJNPK_4OHQIyqtWaJlkONq2DLUPD9kXlLYRjUn7-dxNpG3gNpoPpe2A6IIRR9YbZJxDKoJLsiPOv4x1CuODYuz-MBT8Lgn318ylhB6ZZTiYBdw/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHoPp9kopZFNraJh9wm8Ma0V7k7LzICGfC1A-0311BC6vOs9QH68fZEH7t5G2B2eAHcDb-JiUWbO8ehEC7Zf9hTEbc5Kio4npavmQrGSn7wZPiNgp0gqWhXwVoBdC2O141nHzttK2CmL8/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Kode http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html adalah URL tujuan,, silahkan ganti sesuai yang kalian kehendaki!
Simpan dan Lihat Hasilnya!

Semoga Artkel yang saya tulis ini mengenai Cara Membuat Menu Drop Down dibawah atau diatas Header ini bermanfaat untuk kalian!

Selamat Mencoba sobat........

Terimakasih sudah Berkunjung, jangan Lupa Meninggalkan komentar

Posted by : The-Bhuz.Com http://visitors2cash.com/ref.php?refId=127284

Artikel Cara Membuat Menu Drop Down dibawah atau diatas Header diposting oleh The-Bhuz.Com . Terima kasih atas kunjungannya. Kritik dan saran dapat disampaikan melalui kotak komentar. Jika diperlukan Artikel ini bisa disebarluaskan melalui blog Sobat, hanya saja mohon sertakan link sumbernya dengan tautan link aktif ke postingan ini. Terimakasih. Selamat bersenang-senang.

a href="http://the-bhuz.blogspot.com/2013/06/cara-membuat-menu-drop-down-dibawah.html" target="_blank"> Cara Membuat Menu Drop Down dibawah atau diatas Header

Bloger

Tutorial