Membuat Horizontal Drop Down Menu Menggunakan CSS

Membuat menu dropdown kali ini beda dengan posting sebelumnya dimana kita membuatnya dengan menyisipkan animasi flash, hasilnya memang cukup menarik, tapi beberapa orang juga kurang suka karena akan berpengaruh pada kecepatan loading blog kita. kalau kamu ingin tahu cara membuat menu cantik dengan flash silahkan klik disini.
Buat teman-teman yg belum tau apa itu menu dropdown, menu drop down ini adalah menu navigasi yang akan menampilkan sub menu dibawahnya secara otomatis apabila di sorot oleh mouse. Sebenarnya banyak cara yang bisa dipakai untuk membuat menu drop down, dan salah-satu cara yang saya pakai adalah menggunakan bahasa CSS yang diadopsi dari situs http://www.cssplay.co.uk yang sudah di edit oleh kang rohman (thx atas pengeditan CSSnya ya!), tapi sudah saya modif lagi sedikit agar lebih memudahkan teman-teman untuk mengubah warna menunya agar sesuai dengan warna template yang dipakai.

Oke biar mudah dimengerti kita langsung praktek saja dengan mengikuti langkah-langkah dibawah ini:

• Login ke blogger.com
• Setelah masuk pada halaman dashboard, klik "Layout" atau "Tataletak".
• Kemudian klik submenu "Edit HTML".
• biar aman disarankan sebelum mengubah kode template, silahkan di backup dulu. Klik link "Download template sepenuhnya" dan save di hardisk kamu.
• sekarang lihat ke kode template anda, dan cari kode berikut: ]]></b:skin>
• Kemudian Copy kode di bawah ini, lalu paste di atas kode : ]]></b:skin>

/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_definition2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:0; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #808080;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;} #menu .one {background: #808080; border-top:5px solid #C0C0C0;}<br />#menu .two {background: #808080; border-top:5px solid #C0C0C0;} #menu .three {background: #808080; border-top:5px solid #C0C0C0;} #menu .four {background: #808080; border-top:5px solid #C0C0C0;} #menu .one dt {background: #969696;} #menu .two dt {background: #969696;} #menu .three dt {background: #969696;} #menu .four dt {background: #969696;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #e8e8e8;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #e8e8e8;} #menu .four dd {border-bottom:1px solid #e8e8e8;} #menu dd.last {border-bottom:1px solid #e8e8e8;} #menu dt a, #menu dt a:visited {display:block; color:#000000;} #menu dd a, #menu dd a:visited {color:#000000; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;} #menu .one dd a {background:#C0C0C0; color:#000000;} #menu .two dd a {background:#C0C0C0; color:#0000000;} #menu .three dd a {background:#C0C0C0; color:#000000;} #menu .four dd a {background:#C0C0C0; color:#000000;} #menu .one dd a:hover {background: #808080; color:#FF0000;} #menu .two dd a:hover {background: #808080; color:#FF0000;} #menu .three dd a:hover {background: #808080; color:#FF0000;} #menu .four dd a:hover {background: #808080; color:#FF0000;}

• Silahkan lihat ke bagian bawah lagi, lalu temukan kode seperti ini :


<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='your blog title (Header)' type='Header'/>

</b:section>

• Ubahlah kode yang berwarna merah, sehingga kodenya menjadi seperti ini :
  

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>

<b:widget id='Header1' locked='false' title='your blog title (Header)' type='Header'/>

</b:section>

• Klik tombol "Save Template" atau "Simpan Template".
  

• langkah selanjutnya kamu harus menambah elemen atau gadget di blog kamu dan caranya adalah:
  

1. Klik sub menu "Page Element" atau "elemen Halaman"
2. Klik pada link "add a gadget" atau "Tambah Gadget"
3. setelah jendela pop up muncul, pilih opsi HTML/JavaScript.
4. Copy kemudian paste kode di bawah ini pada isi gadget yang muncul tadi :

<p class="'description'"><span><data:description/></span></p></b:if></b:includable></b:widget></b:section><br /><br /><ul id="menu"><!-- drop menu start --> <li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --><dt><a href="'data:blog.homepageUrl'">Home</a></dt> <dd><a href="PASTE-LINK-DISINI">My Friendster</a></dd> <dd class="last"><a href="PASTE-LINK-DISINI">My Facebook</a></dd></dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="two"> <dt><a href="PASTE-LINK-DISINI">MENU2</a></dt> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd> <dd class="last"><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="three"> <dt><a href="http://prie23.blogspot.com">MENU3</a></dt> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU3</a></dd> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU3</a></dd> <dd class="last"><a href="PASTE-LINK-DISINI">EDIT SUB MENU3</a></dd></dl><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--><dl class="four"> <dt><a href="http://prie23.blogspot.com" target="new">DOWNLOAD</a></dt><dd><a href="http://prie23.blogspot.com" target="new">Antivirus</a></dd><dd><a href="http://prie23.blogspot.com" target="new">Software</a></dd><br /><dd><a href="http://prie23.blogspot.com" target="new">Video</a></dd><dd class="last"><a href="http://prie23.blogspot.com" target="new">MP3</a></dd></dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul><!-- end of drop down menu -->

• Klik tombol "Save Template" atau "Simpan Template"
• Selesai, Silahkan lihat hasilnya.

Catatan : untuk beberapa template, cara ini kurang menghasilkan tampilan yang bagus, maka sebaiknya kamu mengedit kode2 nya. misalnya kode warnanya kamu rubah agar sesuai dengan warna template kamu.

arti dari kode didalam tag <dt> dan <dd> adalah:
Kode yang di awali tanda <dt>, adalah judul menu utama (menu induk).
Kode yang di awali tande <dd>, adalah judul untuk sub menu (sub menu induk).

Untuk mengisi link perhatikan kode dibawah ini:

<dl class="two"> <dt><a href="PASTE-LINK-DISINI">MENU2</a></dt>
<dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd>
tulisan PASTE-LINK-DISINI harus kamu isi dengan link dan tulisan EDIT SUB MENU2 ataupun MENU2 kamu isi dengan judulnya karena itu yang nantinya ditampilkan di blog.

Desain dari masing2 template biasanya berbeda antara satu dengan yang lainnya, maka saya hanya mengambil contoh untuk template minima saja (template asli blogger) sebagai gambaran saja. langkah-langkahnya adalah sebagai berikut :

• Login ke blogger dengan ID anda
• setelah berada di halaman dashbord , klik Layout.
• Kemudian klik tabedit HTML.
• Saya sarankan kepada anda sebelum mengubah kode template, silahkan di backup dulu. Klik link Download template sepenuhnya.
• Silahkan anda beri tanda ceklist pada kotak kecil di samping tulisan Expand Templates Widget. Tunggu beberapa saat.
• Lihat ke kode template anda dan temukan kode berikut : ]]></b:skin>
• Copy kode di bawah ini, lalu paste di atas kode: ]]></b:skin>
  

/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_definition2.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any<br />way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:0; padding:0;} #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;} #menu li dl {position:absolute; top:0; left:0;padding-bottom:5px;} #menu li a, #menu li a:visited {text-decoration:none;} #menu li dd {display:none;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} #menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} #menu dl {width: 150px; margin: 0; padding: 0; background: #808080;} #menu dt {margin:0; padding: 5px 5px 5px 20px; font-size: 1.1em; color: #fff; border-bottom:1px solid #fff; border-top:1px solid #fff;} #menu .one {background: #808080; border-top:5px solid #C0C0C0;}<br />#menu .two {background: #808080; border-top:5px solid #C0C0C0;} #menu .three {background: #808080; border-top:5px solid #C0C0C0;} #menu .four {background: #808080; border-top:5px solid #C0C0C0;} #menu .one dt {background: #969696;} #menu .two dt {background: #969696;} #menu .three dt {background: #969696;} #menu .four dt {background: #969696;} #menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu .one dd {border-bottom:1px solid #e8e8e8;} #menu .two dd {border-bottom:1px solid #e8e8e8;} #menu .three dd {border-bottom:1px solid #e8e8e8;} #menu .four dd {border-bottom:1px solid #e8e8e8;} #menu dd.last {border-bottom:1px solid #e8e8e8;} #menu dt a, #menu dt a:visited {display:block; color:#000000;} #menu dd a, #menu dd a:visited {color:#000000; text-decoration:none; display:block; padding:4px 5px 4px 20px; width:125px;} #menu .one dd a {background:#C0C0C0; color:#000000;} #menu .two dd a {background:#C0C0C0; color:#0000000;} #menu .three dd a {background:#C0C0C0; color:#000000;} #menu .four dd a {background:#C0C0C0; color:#000000;} #menu .one dd a:hover {background: #808080; color:#FF0000;} #menu .two dd a:hover {background: #808080; color:#FF0000;} #menu .three dd a:hover {background: #808080; color:#FF0000;} #menu .four dd a:hover {background: #808080; color:#FF0000;}

lihat ke bagian bawah dan temukan kode ini:

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>

Delete / hapus kode di atas lalu ganti dengan kode di bawah ini :
<p class="'description'"><span><data:description/></span></p></b:if></b:includable></b:widget></b:section><br /><br /><ul id="menu"><!-- drop menu start --> <li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="one"> <!-- Alter the links with your own --><dt><a href="'data:blog.homepageUrl'">Home</a></dt> <dd><a href="PASTE-LINK-DISINI">My Friendster</a></dd> <dd class="last"><a href="PASTE-LINK-DISINI">My Facebook</a></dd></dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="two"> <dt><a href="PASTE-LINK-DISINI">MENU2</a></dt> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd> <dd class="last"><a href="PASTE-LINK-DISINI">EDIT SUB MENU2</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> <li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--> <dl class="three"> <dt><a href="http://prie23.blogspot.com">MENU3</a></dt> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU3</a></dd> <dd><a href="PASTE-LINK-DISINI">EDIT SUB MENU3</a></dd> <dd class="last"><a href="PASTE-LINK-DISINI">EDIT SUB MENU3</a></dd></dl><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]--><dl class="four"> <dt><a href="http://prie23.blogspot.com" target="new">DOWNLOAD</a></dt><dd><a href="http://prie23.blogspot.com" target="new">Antivirus</a></dd><dd><a href="http://prie23.blogspot.com" target="new">Software</a></dd><br /><dd><a href="http://prie23.blogspot.com" target="new">Video</a></dd><dd class="last"><a href="http://prie23.blogspot.com" target="new">MP3</a></dd></dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> </ul><!-- end of drop down menu -->

• Klik tombol Simpan Perubahan, selesai deh.