Cara membuat menu Drop Down Versi Mobile, HP dan Versi Komputer

Menu Drop Down ini bisa digunakan dan bisa tampil untuk versi mobile, HP dan versi web (dekstop/pc/laptop).

Contoh gambar

Untuk mengaturnya kembali atau membuat menu sendiri diperlukan beberapa kode CSS dan langkah-langkah dibawah ini :

1. Sign in di blogger
2. Klik Opsi lainnya
3. Klik Templete
4. klik Edit HTML
5. Centang tulisan Expand Widget Templates
6. Cari kode ]]></b:skin>  (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin>  


/* Menu Horizontal Dropdown ----------------------------------------------- */
#menuwrapperpic{
background: #222222  repeat-x;
width:100%;
margin:0 auto;
padding:0 auto
}
#menuwrapper{
width:100%;
height:35px;
margin:0 auto
}
#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: #ff9900;
border-right:1px solid #999797;
padding:12px 10px 8px
}
#menubar
a.trigger{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNx-YYX1EQp9Kkjbh_y1NQZbzCDzvd5VBlgENCJOdpTZcjsrh-aSulcOp0fOW-f6gozicYI0p0ODZXxDbetpZx8CDfTZpzT_NdQ5VRKhPwh09KpGah9ogMLhhw8Mx6GywC3uAFqOrJm6I/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:#C50A0A;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
}


8. Kemudian cari kode


1. <header> : untuk menu di atas header blog
2. </header>: untuk menu di bawah header blog


9. Copy dan pastekan kode dibawah ini dan letakkan diatas kode <header> untuk menu diatas header dan atau diatas kode </header> untuk menu dibawah header


<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href=' nama-alamat-blog.html ' target='new'>Home</a></li>
<li><a class='trigger'>nama menu 1</a>
<ul>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target= ' new '>sub nama menu 1</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target= ' new '> sub nama menu 1</a></li>
<li class='hr'/>
<li> <a href=' nama-alamat-blog.html ' target=' new '> sub nama menu 1</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html  ' target=' new '> sub nama menu 1</a></li>
</ul>
</li>
<li><a href=' nama-alamat-blog.html  ' target=' new '>nama menu </a></li>
<li><a href=' nama-alamat-blog.html ' target=' new '>nama menu</a></li>
<li><a class='trigger'>nama menu 2</a>
<ul>
<li class='hr'/>
<li><a href='nama-alamat-blog.html ' target=' new '>sub nama menu 2</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='_blank '> sub nama menu 2</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='  new '> sub nama menu 2</a></li>
</ul>
</li>
<li><a class='trigger'>nama menu 3</a>
<ul>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target=' new  '> sub nama menu 3</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html ' target='new'> sub nama menu 3</a></li>
</ul>
</li>
<li><a class='trigger'>nama menu 4</a>
<ul>
<li class='hr'/>
<li><a href= ' nama-alamat-blog.html '>Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href= ' nama-alamat-blog.html '  target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href='  nama-alamat-blog.html ' target='new '> Sub nama menu 4</a></li>
<li class='hr'/>
<li><a href=' nama-alamat-blog.html  ' target='new '> Sub nama menu 4</a></li>
</ul>
</li>
<li><a href=' nama-alamat-blog.html ' target='new '> nama menu </a></li>
</ul>
</div>
<div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
</div></div><br class='clearit'/></div><div style='clear:both;'/></div>

    


Keterangan


1. Kode berwarna merah adalah warna background utama
2. Kode warna coklat adalah warna teks utama
3. Kode berwarna biru adalah lebar menu
4. Kode warna hijau adalah garis pembatas menu
5. Kode warna biru langit adalah warna background sub menu
6. Nama alamat blog adalah Url tujuan, ganti dengan Url pada blognya kawan

Demikianlah postingan saya kali ini tentang cara membuat menu dropdown diatas header atau dibawah header, semoga bermanfaat.

- See more at: http://ketutjoel.blogspot.com/2014/07/cara-membuat-menu-drop-down-versi.html#sthash.IWy2GIPG.dpuf