Selamat .. sobat Ragalofo 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
screenshot menu dropdown |
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.
Oia, cara ini aku dapat dari wartaberata.com. Dan cara ini menurutku cara yang paling mudah dari
beberapa artikel lain yang pernah saya lihat. Saya sungguh berterimakasih akhirnya bisa memasang menu dropdown ini berkat tutorial dari kang wartabeta. Ok begini caranya..
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 ]]></b:skin> (gunakan ctrl+F untuk search) lalu tepat diatasnya letakkan kode ini
#NavbarMenu {background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFpPe94UJ8YorvLKplxhxvs5Vaz9CEzZbwA8RqEryC2PAaTckPOfYEdw6gqrefVaThOSjVYfbjnfq-qd6Qt8xo25XO1pnhRXOAQE-aZFk39JwfjK1nWDr3E6210q7y1GtkgQckeASxUfQ/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 <div id='header-wrapper'> lalu tepat dibawahnya pastekan kode ini
contoh menu drop down untuk kode dibawah |
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'><li><a href='http//zamedaku.blogspot.com'>Home</a></li><li><a href='http//zamedaku.blogspot.com'>profil</a></li><li><a href='http//zamedaku.blogspot.com'>Blogging</a></li><li><a href='http//zamedaku.blogspot.com'>Menu turun »</a><ul><li><a href='http//zamedaku.blogspot.com'>Menu turun 1</a></li><li><a href='http//zamedaku.blogspot.com'>Menu turun 2</a></li><li><a href='http//zamedaku.blogspot.com'>Menu turun 3</a></li><li><a href='http//zamedaku.blogspot.com'>Menu turun 4</a></li><li><a href='http//zamedaku.blogspot.com'>Menu turun 5</a></li></ul></li><li><a href='http//zamedaku.blogspot.com'>Contact us</a></li></ul></div></div>Untuk link warna merah rubahlah dengan link anda, untuk warna oranyerubahlah untuk nama menu-menunya.
1 Comments
Saya coba terapkan gan, trims ya. Ditunggu kunjungannya...
ReplyDelete