Membuat Menu Dropdown horisontal

Untuk mempercantik blog, dan merapikan tampilan blog agar tidak penuh dengan teks artikel yang menempel sehingga membuat blog terasa kurang fresh, biasanya di sederhanakan dengan tampilan menu dropdown horizontal atau dengan menu dropdown vertikal di sidebar. Adapun cara membuat menu dropdown horisontal untuk mempercantik blog anda bisa di copy scriptnya di bawah ini. Berikut contoh gambar menu dropdown horisontal.

Berikut Cara Membuat Menu Horizontal Blog Drop Down

1. Masuk ke akun blogger anda
2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
3. Cari kode ]]>

Masukkan kode CSS berikut tepat diatas ]]>

</span></i>#navdropdownsearchengine { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; }<br> #navdropdownseleft { width: 400px; float: left; margin: 0; padding: 0; }<br> #navdropdownse { margin: 0; padding: 0; }<br> #navdropdownse ul { float: left; list-style: none; margin: 0; padding: 0; }<br> #navdropdownse li { list-style: none; margin: 0; padding: 0; }<br> #navdropdownse li a, #navdropdownse li a:link, #navdropdownse li a:visited { background: #222222; height: 15px; color: #fff; display: block; font-size: 11px; font-family: trebuchet ms, ; text-transform: none; text-decoration: none; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; border-right: 1px solid #000; }<br> #navdropdownse li a:hover, #navdropdownse li a:active {background: #222222; color: #ffffff; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; }<br> #navdropdownse li li a, #navdropdownse li li a:link, #navdropdownse li li a:visited { background: #ffffff; width: 150px; color: #222222; font-size: 11px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; }<br> #navdropdownse li li a:hover, #navdropdownse li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; }<br> #navdropdownse li { float: left; padding: 0; }<br> #navdropdownse li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }<br> #navdropdownse li ul a { width: 140px; }<br> #navdropdownse li ul ul { margin: -32px 0 0 171px; }<br> #navdropdownse li:hover ul ul, #navdropdownse li:hover ul ul ul, #navdropdownse li.sfhover ul ul, #navdropdownse li.sfhover ul ul ul { left: -999em; }<br> #navdropdownse li:hover ul, #navdropdownse li li:hover ul, #navdropdownse li li li:hover ul, #navdropdownse li.sfhover ul, #navdropdownse li li.sfhover ul, #navdropdownse li li li.sfhover ul { left: auto; }<br> #navdropdownse li:hover, #navdropdownse li.sfhover { position: static; }</span><i><span style="color: #666666;">

Cari kode dengan struktur seperti berikut ini
</span></i><div id='header-outer'> <br> <div id='header-inter'> <br> <div id='header-wrapper'> <br> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br> <b:widget id='Header1' locked='true' title=' (Header)' type='Header'><br> <b:includable id='title'><br> ----------------------<br> ----------------------<br> ----------------------<br> </b:includable><br> </b:widget><br> </b:section><br> </div> <br> </div> <br> </div> </span><br> <i><span style="color: #666666;">
Letakkan kode berikut tepat dibawah kode diatas

</span></i><div class='menuhorisontal'> <br> <ul id='navdropdownse'><br> <li><a href='#'>Menu DropDown</a></li> <br> <li><a href='#'>Menu DropDown A</a><br> <ul><br> <li><a href='#'>Menu DropDown Sub A1</a></li> <br> <li><a href='#'>Menu DropDown Sub A2</a></li> <br> <li><a href='#'>Menu DropDown Sub A3</a></li> </ul> </li> <br> <br> <li><a href='#'>Menu DropDown B</a> </li> <br> <li><a href='#'>Menu DropDown C</a> </li> <br> <br> <li><a href='#'>Menu DropDown D</a><br> <ul><br> <li><a href='#'>Menu DropDown Sub D1</a></li> <br> <li><a href='#'>Menu DropDown Sub D2</a></li> <br> <li><a href='#'>Menu DropDown Sub D3</a></li> </ul> </li> <br> <li><a href='#'>Menu DropDown E</a> </li> <br> </ul> <br> </div> </span><i><span style="color: #666666;">

Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog drop down

Simpan Template