- Masuk ke akun blogger anda
- Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
- Cari kode ]]></b:skin>
- Masukkan kode CSS berikut tepat
diatas ]]></b:skin>
#navdropdownsearchengine { background: #000; width: 400px; height: 10px; font-size: 11px; font-family: Trebuchet MS, Tahoma, Verdana; color: #fff; margin: 0px; padding: 0px; }
#navdropdownseleft { width: 400px; float: left; margin: 0; padding: 0; }
#navdropdownse { margin: 0; padding: 0; }
#navdropdownse ul { float: left; list-style: none; margin: 0; padding: 0; }
#navdropdownse li { list-style: none; margin: 0; padding: 0; }
#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; }
#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; }
#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; }
#navdropdownse li li a:hover, #navdropdownse li li a:active { background: #222222; color: #ffffff; padding: 7px 10px; }
#navdropdownse li { float: left; padding: 0; }
#navdropdownse li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; }
#navdropdownse li ul a { width: 140px; }
#navdropdownse li ul ul { margin: -32px 0 0 171px; }
#navdropdownse li:hover ul ul, #navdropdownse li:hover ul ul ul, #navdropdownse li.sfhover ul ul, #navdropdownse li.sfhover ul ul ul { left: -999em; }
#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; }
#navdropdownse li:hover, #navdropdownse li.sfhover { position: static; } - Cari kode dengan struktur
seperti berikut ini
<div id='header-outer'>
<div id='header-inter'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Header)' type='Header'>
<b:includable id='title'>
----------------------
----------------------
----------------------
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</div>
Letakkan kode berikut tepat dibawah kode </b:section> diatas
<div class='menuhorisontal'>
<ul id='navdropdownse'>
<li><a href='#'>Menu DropDown</a></li>
<li><a href='#'>Menu DropDown A</a>
<ul>
<li><a href='#'>Menu DropDown Sub A1</a></li>
<li><a href='#'>Menu DropDown Sub A2</a></li>
<li><a href='#'>Menu DropDown Sub A3</a></li></ul></li>
<li><a href='#'>Menu DropDown B</a> </li>
<li><a href='#'>Menu DropDown C</a> </li>
<li><a href='#'>Menu DropDown D</a>
<ul>
<li><a href='#'>Menu DropDown Sub D1</a></li>
<li><a href='#'>Menu DropDown Sub D2</a></li>
<li><a href='#'>Menu DropDown Sub D3</a></li></ul></li>
<li><a href='#'>Menu DropDown E</a> </li>
</ul>
</div> - 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
Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca
artikel ini, Cara Membuat Menu Horizontal Blog Drop Down