Cara Membuat Menu Drop Down Horizontal Dibawah Header Blog

Hi all !!!

Apa kabar ? Ketemu lagi diposting saya kali ini, dikesempatan kali ini saya akan menjelaskan pada anda tentang bagaimana "cara membuat menu drop down horizontal di bawah header blog". Kegunaan dari  menu yang satu ini yaitu untuk memudahkan mereka yang mengunjungi blog anda untuk dengan mudah memilih menu yang diinginkannya. Selain itu menu drop down horizontal ini juga bertujuan untuk memperindah tampilan dari blog anda.

Contoh "Menu Drop Down Ini" bisa dilihat pada tampilan di atas blog ini, atau nantinya seperti gambar di bawah :

Langkah-langkah pengerjaannya sebagai berikut :

• Pertama Login ke akun blog anda.
• Selanjutnya pada halaman dasbor anda pilih  Rancangan => Tata Letak/Design => Edit HTML 
• Kemudian cari kode " ]]></b:skin> "(Tekan CTRL F/F3 untuk mempermudah pencarian anda) 
• Masukan kode berikut tepat di atas kode " ]]></b:skin> "

Code :
#tejahtc{ height:33px; width:1000px; margin:0 auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CFiNvSTrAftH0UIelJAVxD9Lc1zivD7qkaqIA5ADlfiIFL0Y66zjlWaGcqwPCViAuBPiUWek3WiMQY43mzVty30NakGAn-vAs8lMQUPk1UGz0PtinfON2Rlf71A9PtMHY-KaF_f6uRAQ/) repeat-x; display:block; padding:0px 0 0px 0px; font-size:12px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; font-weight:normal; border-top:1px solid #252424; } #tejas{ margin: 0px; padding: 0px; width:1000px; background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9CFiNvSTrAftH0UIelJAVxD9Lc1zivD7qkaqIA5ADlfiIFL0Y66zjlWaGcqwPCViAuBPiUWek3WiMQY43mzVty30NakGAn-vAs8lMQUPk1UGz0PtinfON2Rlf71A9PtMHY-KaF_f6uRAQ/) repeat-x; height:33px; } #tejas ul { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li { float: left; list-style: none; margin: 0px; padding: 0px; } #tejas li a, #tejas li a:link, #tejas li a:visited { color: #fae7df; display: block; margin: 0px; padding: 9px 10px 10px 10px; } #tejas li a:hover, #tejas li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPpfTVOjDeMty-7tUi5Wo4vPWQOFX3z4CVVzyXm09bqlmomLRfckMT6waW6e8T4xWPJgOnG_U76upcrDq2a8HBQWUMZapF4P60LJotZz1EEv2H-4Ijv0JD4UwYkhruO9WF9c0ClrI_4rzx/) repeat-x; color: #fff; margin: 0px; padding: 9px 10px 10px 10px; text-decoration: none; } #tejas li li a, #tejas li li a:link, #tejas li li a:visited { background:#ED4A05; width: 150px; color: #fae7df; font-family:Tahoma,century gothic,Georgia, sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 10px 10px; border-bottom: 1px solid #FF7800; } #tejas li li a:hover, #tejas li li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPpfTVOjDeMty-7tUi5Wo4vPWQOFX3z4CVVzyXm09bqlmomLRfckMT6waW6e8T4xWPJgOnG_U76upcrDq2a8HBQWUMZapF4P60LJotZz1EEv2H-4Ijv0JD4UwYkhruO9WF9c0ClrI_4rzx/) repeat-x; color: #fff; padding: 9px 10px 10px 10px; } #tejas li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; } #tejas li li { } #tejas li ul a { width: 140px; } #tejas li ul a:hover, #tejas li ul a:active { } #tejas li ul ul { margin: -34px 0 0 170px; } #tejas li:hover ul ul, #tejas li:hover ul ul ul, #tejas li.sfhover ul ul, #tejas li.sfhover ul ul ul { left: -999em; } #tejas li:hover ul, #tejas li li:hover ul, #tejas li li li:hover ul, #tejas li.sfhover ul, #tejas li li.sfhover ul, #tejas li li li.sfhover ul { left: auto; } #tejas li:hover, #tejas li.sfhover { position: static; }

• Setelah itu silakan copy kode dibawah ini dan paste tepat dibawah kode " <div id='content-wrapper'> "

Code :
<div id='tejahtc'> <div id='tejas'> <ul> <li><a href='http://NAMA LINK BLOG ANDA/'>Home</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1</a> <ul class='children'> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-1</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-2</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-1-3</a></li> </ul> </li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2</a> <ul class='children'> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-1</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-2</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-2-3</a></li> </ul> </li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3</a> <ul class='children'> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-1</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-2</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-3-3</a></li> </ul> </li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-4</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5</a> <ul class='children'> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-1</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-2</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-3</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-5-4</a></li> </ul> </li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6</a> <ul class='children'> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-1</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-6-2</a></li> </ul> </li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-7</a></li> <li><a href='Your-Link-Here' title='Link-Title'>Link-Name-8</a></li> </ul> </div> </div> <div class='clear'/>

• Terakhir silakan disave dan liat hasilnya.

Note :

1. Mohon tinggalkan sedikit kenangan atau ucapan terima kasih di blog ini dengan cara berkomentar atau memfollow blog ini atau bisa juga bertukar link dengan saya. Terima kasih.
2. Good luck and remember me at griya dalem.