0 Trik Blogger : Cara Membuat Menu Horizontal Blog Drop Down

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; }
5. 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>
6. Selesai. Silahkan pratinjau perubahan blog anda, jika tidak ada error maka pada tampilan Preview, anda akan melihat tampilan menu horizontal blog drop down
7. Simpan Template

Semoga bermanfaat dan bisa diterapkan dalam blog anda setelah membaca artikel ini

Komentar →