Cara Membuat Drop Down Menu Di Atas Atau Di Bawah Header Blog

Cara Membuat Drop Menu Di Atas Atau Dibawah Header Blog - Ya Kembali Lagi Bersama Saya :D Disini Saya Akan Share Ilmu Cara Membuat Drop Menu Atas Atau Di Bawah Header Blog .. Cara Membuat Nya Tidak Susah Ko :D Tapi Butuh Ketelitian :D Hehe

Langsung Ke Intinya Aja Bro :D Silahkan Di Simak

   1. Masuk ke Dashboard Blog
   2. Klik Template
   3. Pilih Edit HTML
   4. Cari kode ]]></b:skin> (Tekan CTRL + F untuk memudahkan pencarian)
   5. Copy kode berikut, lalu paste diatas kode ]]></b:skin>

#navbar {display:none}
#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcT_P0CFC6bMwflTKhUkfancRW6KNXktLPQ5UIBzw-uCG9VJ6g8lvfPl4fWNPtiLg_rGNCE5F28BdBR8f-1RNsYqKM0IeqyGmEvYKKDDg0VmsVLLqRKsF2ge8k0RH5YoG_bFdAREUWmao/s1600/menubar.png) repeat-x;width:980px;margin:0 auto;padding:0 auto} #menuwrapper{width:980px;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/AVvXsEjPtzy_wsxLYn-kRiS9FUF2bEnvT_F0XGAyS2F1b1sx1q4iK21GppNYvoVckQkbO1DLfLJsM20jOTadmbiuj3VAsszK7QaoeGRPPPHhcqK-spsG-B4VT7a3ARO1Qkk6w9WQr6auxnIGO3Y/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 berwarna kuning adalah lebar tab, silahkan sesuaikan dengan lebar
            header blog kamu

   6. Silahkan cari kode berikut :

• <header>   : Menempatkan menu diatas nama blog (Header)

• </header> : Menempatkan menu dibawah nama blog (Header)
  

   7. Copy kode berikut, lalu paste diatas kode <header> atau dibawah kode
       </header>

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='URL Tujuan' target='new'>HOME</a></li>
<li><a href='URL Tujuan' target='new'>Menu 1</a></li>
<li><a href='URL Tujuan' target='new'>Menu 2</a></li>
<li><a class='trigger'>Menu 3</a>
<ul>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 3.1</a></li>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 3.2</a></li>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 3.3</a></li>
</ul>
</li>
<li><a href='URL Tujuan' target='new'>Menu 4</a></li>
<li><a class='trigger'>Menu 5</a>
<ul>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 5.1</a></li>
<li class='hr'/>
<li><a href='URL Tujuan' target='new'>Submenu 5.2</a></li>
</ul>
</li>
</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://demo-completed.blogspot.co.id/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://demo-completed.blogspot.co.id/'/>
<input id='search-box' name='q' size='25' style='background: #EEEDED; border: 1px solid #000000 ' type='text'/>
<input id='search-btn' type='submit' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan :
         - Kode berwarna pink adalah judul pada tab menu
         - Kode berwarna hijau adalah URL tujuan
         - Kode berwarna aqua adalah kolom pencarian, ganti dengan URL Blog kamu

   8. Klik Pratinjau terlebih dahulu jika masih ragu
   9. Jika sudah yakin, klik Save / Simpan
   10. Selesai

Silahkan kreasikan karyamu ^_^ Perlu ketelitian yang sangat jeli dan pasti juga kesabaran yang memadai.

Salam Luar Biasa :)

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: