Selamat .... Sahabat Ku.. hehe.. selamat apa coba? ya bisa selamat
pagi, siang, sore, malam. hehe.. Sekarang waktu apa ya? tanya aja
weather.com . Maaf nih agak nylenong dikit :p
Hmm.. sebelumnya sudah tau menu drop down belum? yang belum tau silakan
lihat paling atas dari blog ini yang berjejer ada tulisan home, tips
tricks blog, info sehat, dan lain-lain. Dan sekarang arahkan kursor anda
ke tab menu tips tricks blog dan nanti pasti akan muncul seperti daftar
yang turun kebawah. Nah itu yang namanya menu dropdown. Tapi jauh
sebelumnya saya juga pernah share tentang cara membuat tab menu
biasa (yang dulu ini tanpa menu dropdown dan biasaya lebih digunakan
untuk newbie). Tapi apa salahnya mencoba cara membuat menu dropdown ini
agar blog sobat terlihat lebih professional.
 |
| screenshot menu dropdown |
Sebelumnya backup template duyu..
1. Login ke blogger (yang diperbarui bahasa Indonesia)
2. Masuk ke template - edit html - centang pada expand template widget
3. Cari kode ini ]]>
(gunakan ctrl+F untuk search) lalu tepat diatasnya letakkan kode ini
#NavbarMenu {background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirmF8mCPsC2YhfJAv4cJDLGd7mMVyh9eD5kF6nl1JLiMz_ZUo-Xo7rkOSOyyVHrXrBtKsFex9RZ3OGelhnM9hhjfAcplqf-MG_tTh79HeT8uSe_GEjFbkVfMYAEs_aFIsKBD1JEiAxwwA/s400/navbar11.png);width: 960px;height: 35px;font-size: 12px;font-family: arial, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;}#NavbarMenuleft {width: 710px;float: left;margin: 0;padding: 0;}#nav {margin: 0;padding: 0;}#nav ul {float: left;list-style: none;margin: 0;padding: 0;}#nav li {list-style: none;margin: 0;padding: 0;}#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 14px;font-weight:bold;font-family: sans-serif, Verdana;font-weight: bold;text-transform: none;margin: 0;padding: 9px 15px 8px;}#nav li a:hover, #nav li a:active {background: #555;color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #555;width: 200px;color: #FFF;font-size: 14px;font-family: "ms sans serif", Verdana;font-weight: normal;text-transform: none;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px dotted #7F7F7F;border-left: 1px solid #7F7F7F;border-right: 1px solid #7F7F7F;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;padding: 7px 10px;}#nav li {float: left;padding: 0;}#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}#nav li ul a {width: 140px;}#nav li ul ul {margin: -32px 0 0 171px;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}#nav li:hover, #nav li.sfhover {position: static;}
4. Selanjutnya cari kode ini
 |
| contoh menu drop down untuk kode dibawah |
5. Simpan. Dan lihat hasilnya....
Sumber
.png)
