Cara Membuat Menu Horizontal Drop down Pada Blog

Selamat Siang sahabat,membuat menu horizontal adalah menampilkan menu menu yang ada yang didalam blog kita sesuai dengan pilihan kita,dengan kita menambah menu drop down maka pengunjung akan semakin mudah untuk menemukan apa yang terkandung didalam blog kita,Menu drop down biasanya terdiri dari menu berdasarkan categories atau salah satu artikel yang sangat menarik dari blog kita,
Tutorial dibawah ini akan mengajarkan bagaimana untuk membuat menu horizontal secara dropdwon.
silahkan ikuti tutorialnya :
1.login blogger
2.pilih template>>edit html>>centang expand widget>>ketik CTRL+F untuk pencarian
3.cari kode

]]></b:skin>

4.masukan kode CSS dibawah ini tepat dibawah kode

]]></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 lagi kode dengan struktur html seperti dibawah 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>

6.letakkan kode berikut tepat dibawah kode

</b:section>

yang sudah saya beri gambaran kode 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>

7.silahkan ganti tanda # dengan link yang akan sobat letakkan didalam menu dan ganti juga judul nya

8.lakukan pratinjau terlebih dahulu sebelum disimpan

9.jika dalam pratinjau tidak menunjukan your template eror berarti kamu sudah berhasil membuat menu horizontal drop down

10.save template dan selesai !!

Okey,itu saja sedikit dari saya semoga bisa bermanfaaat untuk para blogger,terutama newbie seperti saya.

Good LUck!!

artikel terkait

Share this post