Menambahkan
Menu Drop Down adalah untuk menampilkan menu - menu yang tersembunyi, bisa juga untuk menampilkan kategori - kategori dan merapikan tampilan blog.
Berikut untuk
menambahkan menu drop down pada blog :
1. Seperti biasa login ke dashbor blog
2. Klik pada Template dan pilih
Edit HTML
3. Cari kode
]]></b:skin> untuk mempermudah menemukan kode template terbaru baca tutorial saya disini
4. Masukkan kode 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. Temukan kode seperti berikut :
<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>
Keterangan : perhatikan kode
</b:section> diatas, tambahkan kode dibawah ini tepat dibawahnya,
<div class='menuhorisontal'>
<ul id='navdropdownse'>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu DropDown 1</a>
<ul>
<li><a href='#'>Menu DropDown Sub 1.1</a></li>
<li><a href='#'>Menu DropDown Sub 1.2</a></li>
<li><a href='#'>Menu DropDown Sub 1.3</a></li></ul></li>
<li><a href='#'>Menu DropDown 2</a> </li>
<li><a href='#'>Menu DropDown 3</a> </li>
<li><a href='#'>Menu DropDown 1</a>
<ul>
<li><a href='#'>Menu DropDown Sub 1.1</a></li>
<li><a href='#'>Menu DropDown Sub 1.2</a></li>
<li><a href='#'>Menu DropDown Sub 1.3</a></li></ul></li>
<li><a href='#'>Menu DropDown E</a> </li>
</ul>
</div>