Cara Membuat Menu Horizontal Blog Drop Down

Cara Membuat Menu Horizontal Blog Drop Down adalah cara berbeda dalam menampilkan menu-menu yang ada didalam blog yang akan menghemat ruang serta mengelompokkan setiap kategori dari sub menu halaman yang memiliki keterkaitan dengan menu utama dalam blog tersebut. Membuat menu horizontal drop down tidak sama dengan menu horizontal sebelumnya yang telah saya ulas sebelumnya. Pada menu horizontal ini akan memiliki sub menu yang komplek dan tidak autonom seperti menu horizontal sebelumnya karena ia memiliki sub menu yang berkaitan dengan menu utama seperti yang terlihat pada gambar berikut ini

Demo

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 ]]></b:skin>
4. 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

Cara Membuat Menu Horizontal Blog Drop Down 2013-01-06T10:45:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni