IdBlogDesign - Bagi Anda para pengguna blogger tentunya sudah tidak asing lagi dengan apa yang dimaksud dengan Drop Down Menu pada Blogger bukan? Atau mungkin Anda sudah sering kali menjumpainya dibeberapa website ternama lainnya. Drop Down Menu sering kali digunakan untuk menempatkan link atau url pada laman blog maupun website. Selain memperindah desain sebuah blog, Drop Down Menu juga dapat membantu para visitor blog dalam mengakses beberapa konten blog kita yang sengaja dibuat menggunakan url atau link khusus. Untuk style atau gaya, Drop Down Menu cukuplah bervariasi dari yang sederhana hingga yang rumit. Bahkan ada juga yang menggunakan kombinasi antara kode css, kode html dan javascript, sehingga tentunya cukuplah menarik bukan?
Untuk itu dalam kesempatan kali ini IdBlogDesign ingin berbagi dengan Anda tentang cara membuat Drop Down Menu pada Blogger dan tentunya sangat disayangkan jika Anda lewatkan. Namun sebelumnya, perlu Anda ketahui bahwa untuk Drop Down Menu versi IdBlogDesign kali ini tidaklah menggunakan javascript melainkan hanya menggunakan kode css3 dan kode html saja. Untuk penggunaanyapun dirasa cukup mudah, tentunya jika Anda mau mencoba dan berusaha.
Preview Dropdown Menu Blogger
Demo:
http://demodropdownmenu-idblogdesign.blogspot.com/
Ok langsung saja berikut untuk langkah-langkahnya:
- Masuk ke akun blogger Anda.
- Masuk ke menu Tata Letak dan Tambah gadget pada posisi yang Anda kehendaki (ex:main wrapper, crosscol-wrapper, atau yang lainnya.)
- Pilih HTML/JavaScript dan masukkan kode script berikut didalamnya:
<style> .clear{clear:both} .navigasi{position:relative;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0} .navigasi ul{margin:0;padding:0} .navigasi ul li{float:left;list-style:none;position:relative} .navigasi ul li a{display:block;color:#404040;text-decoration:none;padding:5px} .navigasi ul li a:hover{background:#404040;color:#fefefe} .navigasi ul li ul{position:absolute;display:none;width:150px;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0;margin:0 auto} .navigasi ul ul ul{display:none;position:absolute;right:-150px;top:0} .navigasi ul li:hover > ul,.navigasi ul ul li:hover > ul{display:block} .navigasi ul li.clear,.navigasi ul ul li{float:none} </style> <nav class="navigasi"> <ul> <li><a href="#">Beranda</a></li> <li><a href="#">Kategori 1</a> <ul> <li><a href="#">Sub Menu 1.1</a></li> <li><a href="#">Sub Menu 1.2</a> <ul> <li><a href="#">Sub Menu 1.2.1</a></li> <li><a href="#">Sub Menu 1.2.2</a> <ul> <li><a href="#">Sub Menu 1.2.2.1</a></li> <li><a href="#">Sub Menu 1.2.2.2</a></li> <li><a href="#">Sub Menu 1.2.2.3</a></li> <li><a href="#">Sub Menu 1.2.2.4</a></li> </ul> </li> <li><a href="#">Sub Menu 1.2.3</a></li> <li><a href="#">Sub Menu 1.2.4</a></li> </ul> </li> <li><a href="#">Sub Menu 1.3</a></li> <li><a href="#">Sub Menu 1.4</a> <ul> <li><a href="#">Sub Menu 1.4.1</a></li> <li><a href="#">Sub Menu 1.4.2</a></li> <li><a href="#">Sub Menu 1.4.3</a></li> <li><a href="#">Sub Menu 1.4.4</a></li> </ul> </li> </ul> </li> <li><a href="#">Kategori 2</a> <ul> <li><a href="#">Sub Menu 2.1</a></li> <li><a href="#">Sub Menu 2.2</a></li> <li><a href="#">Sub Menu 2.3</a></li> </ul> </li> <li class="clear"></li> </ul> </nav>
Sebelum Anda menyimpan gadget atau kode Drop Down Menu pada Blogger Anda, sesuaikan kode berwarna merah dan hijau diatas terlebih dahulu. Warna merah silahkan ganti dengan link atau url. Sedangkan untuk kode yang berwarna hijau dapat Anda ganti dengan judul laman, judul url ataupun keterangan lainnya.
Kode css dan html ataupun jumlah Drop Down url diatas dapat Anda modifikasi sesuai dengan kreasi Anda masing-masing dan perlu diingat bahwa hasil penggunaan kode diatas tersebut mungkin akan berbeda pada setiap template blog yang telah Anda gunakan. Selamat mencoba...
keren postingannya
BalasHapussalam kenal
Kenal balik gan. :)
HapusNyobain bang
BalasHapusOk, bung selamat mencoba. :)
HapusGan salam kenal ni sebelumnya, aye dah coba, dan berhasil,tapi kok, ketika mouse diarahkan ke sub menunya ga bisa, kenapa ya gan?
BalasHapusSalam kenal balik gan. :)
HapusMungkin disebabkan adanya widget/content yang mengandung kode css "relative/absolute" selain dropdown menu diatas gan. Coba agan check dulu, atau kalau boleh tau dipakai di url mana biar bisa saya lihat dan analis dulu. :)
Mungkin css ntu ya gan penyebabna, soalna aye baru expand widget dg css dari http://unknown-mboh.blogspot.com/2012/09/cara-membuat-horizontal-link-tab-menu.html, url aye ni gan: http://lab-lingk.blogspot.com/ trus gimana ya Gan solusina, maklum aye baru belajar...he....
BalasHapusCoba agan perhatikan kode css class "tabs-inner", class tersebut mengandung kode css "position relative" mungkin itu juga bisa jadi penyebabnya, solusinya letak menu dropdownnya dipindah aja, atau agan modifikasi bagian "tabs-inner". :)
Hapuscara modifikasi tabs-inner gmn gan? soalna aye msh awam ni gan? supaya tdk relative/absolute posisinya
BalasHapustinggal dihapus aja gan kode css "position:relative;" , ada baikknya template dibackup dulu gan. :)
Hapus