MEMBUAT MENU HORIZONTAL DROP DOWN BLOG-SPOT

Zoners!!

Entah dari kapan aku panasaran banget dan terus mencoba mencari jawaban atas pertanyaan dalam benakku ini (lebay tingkat akut ~^^), "gimana sie cara bikin menu horizontal, tapi yg bisa drop down?" Niatnya sie agar mylovelyblog lebih rapi dan sedap dipandang (emang makanan, hehe..), tapi sudah ngubeg-ngubeg mbah google tetap saja hasilnya belum memuaskan. 

Alih-alih rapi, template mylovelyblog malah jadi berantakan. Tapi untuk yang ini aku bersyukur, karena template-nya berantakan aku dengan semangat para pahlawan (lho kok -_-") memperbaiki template mylovelyblog hingga menjadi hijau dan asri seperti ini. Aku suka dan puas! Hohoho ~^^

Dan kemarin, tepatnya 19 Maret 2012 aku mengakhiri masa pencarianku (sumpah lebay bener nie writer ~^^). Akhirnya aku menemukan cara paling mudah membuat menu horizontal yang drop down tanpa harus mengutak-atik mylovelytemplate. Hohoho,, Lestari!! ~^^

Dan hasilnya, i really really glad. So, i will share with you how to make it. check it out!! ~^^

1. harus punya account blogger (writer yang minta ditimpuk ini :D);

2. sign in ke blogger, terus pilih directory 'tata letak';

3. klik 'tambah gadget' dan pilih 'html/javascript';

4. kalau sudah muncul tab 'html/javascript configuration', pada sub menu konten, copy-paste kode di bawah :

<style type="text/css">
#black{background:-webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); width:800px; height:32px; color:#5A6C8C; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;border-left:1px solid #333}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{border-left:1px solid #6BB200; border-right:1px solid #6BB200; list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background: #6BB200; width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Gill Sans MT, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;}
#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 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:-24px 0 0 170px;}
#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;}
</style>
<div id='outer'>

<div id='black'>

<div id='navbarmenuleft'>

<ul id='nav'>

<li><a href='http://irentzone.blogspot.com/'>HOMEPAGE</a></li>

<li><a href='http://www.blogger.com/profile/00000685581296970122'>INTRODUCE</a></li>

<li><a href='#'>MY JOURNEY</a>

<ul>

<li><a href='http://irentzone.blogspot.com/2011/06/assalamualaikum-wr.html'>Pulang K(el)ampung a</a></li>

<li><a href='http://irentzone.blogspot.com/2011/07/pulang-kelampung-part-ii-sambungan.html'>Pulang K(el)ampung b</a></li>

<li><a href='http://irentzone.blogspot.com/2011/04/welcome-to-jungle-2011.html'>Welcome To The Jungle</a></li>

<li><a href='http://irentzone.blogspot.com/2011/06/report-of-welcome-to-jungle-2011.html'>Welcome To The Jungle’s Report</a></li>

</ul></li>

<li><a href='#'>TRACKING</a>

<ul>

<li><a href='http://irentzone.blogspot.com/2011/02/berbeda-itu-menyenangkan.html'>Tracking Ciwidey</a></li>

<li><a href='http://irentzone.blogspot.com/2011/02/perjalanan-yang-mendaki.html'>Tracking Gede</a></li>

<li><a href='http://irentzone.blogspot.com/2011/09/perjalanan-3159m.html'>Tracking Dempo</a></li>

</ul></li>

<li><a href='#'>MY STYLE</a>

<ul>

<li><a href='http://irentzone.blogspot.com/2010/12/introduce-myself.html'>Story of Me</a></li>

<li><a href='http://irentzone.blogspot.com/2011/02/in-memorian-slideshow-video.html'>My Memory</a></li>

<li><a href='http://irentzone.blogspot.com/2011/02/esapala.html'>Esapala</a></li>

</ul></li>

<li><a href='#'>MY POEM</a>

<ul>

<li><a href='http://irentzone.blogspot.com/2011/02/banyak-ilmu-yang-sudah-indah-dapat-di.html'>Stop-nya Esapala</a></li>

<li><a href='http://irentzone.blogspot.com/2012/02/prolog.html'>Prolog</a></li>

<li><a href='http://irentzone.blogspot.com/2012/03/celoteh.html'>Celoteh</a></li>

</ul></li>

<li><a href='#'>HALLYU</a>

<ul>

<li><a href='http://irentzone.blogspot.com/2011/04/timeless-by-jang-ri-in-feat-xiah-junsu.html'>Timeless (Song)</a></li>

<li><a href='http://irentzone.blogspot.com/2011/09/pumpkin-man.html'>A Pumpkin-Man</a></li>

</ul></li>

<li><a href='#'>MOESLIM</a>

<ul>

<li><a href='http://irentzone.blogspot.com/2011/01/jangan-mengeluh-dan-jangan-gelisah.html'>Jangan Gelisah</a></li>

<li><a href='http://irentzone.blogspot.com/2011/04/diam-adalah-pilihan-tepat.html'>Pilihan Tepat</a></li>

<li><a href='http://irentzone.blogspot.com/2011/09/darrusman-official-blog-kekuatan-islam.html'>Kekuatan Islam</a></li>

</ul></li>

<li><a href='#'>KNOWLEDGE</a>

<ul>

<li><a href='http://irentzone.blogspot.com/2011/02/program-beasiswa-lpi-dd.html'>[Scholarship] Dompet Dhuafa</a></li>

<li><a href='http://irentzone.blogspot.com/2011/03/program-beasiswa-bidik-misi.html'>[Scholarship] Bidik Misi</a></li>

<li><a href='http://irentzone.blogspot.com/2012/03/memperindah-header-blog-spot.html'>[Blogger] Membuat Header Blog</a></li>

</ul>
</div></div>

 5. setelah di copas, kita tinggal ubah beberapa content yang sesuai keinginan kita, misalnya :

1. tulisan ini #6BB200 merupakan kode warna untuk border dan latar belakang dari sub menu, bisa kita ganti dengan warna yang sesuai keinginan kita (color code),
2. ukuran dan jenis tulisan menu dapat diganti sesuai dengan kesukaan kita, caranya dengan mengganti 11px Arial untuk main menu dan 14px Gill Sans MT untuk sub menu,
3. sementara untuk tulisan yang berwarna biru dapat diganti dengan nama menu yang kita inginkan (MAIN MENU dan Sub Menu), tulisan berwarna merah dapat diganti dengan url yang sesuai.

6. jika sudah selesai, klik 'simpan' kemudian letakkan gadget ini di bawah ataupun di atas header blog (gimana sukanya ajah ~^^);
7. setelah itu klik 'simpan setelan' dan hasilnya bisa dilihat. ~^^


Inilah tampilan menu horizontal drop down yang berhasil dibuat :

Display Menu Drop Down

SELAMAT MENCOBA!!

Dan selagi zoners mencoba menu ini, aku akan mempelajari multilevel drop down, biar display mylovelyblog makin rapi dan enak diliat. Doakan aku yak!! ~^^
Semoga bermanfaat!