Cara Membuat Menu Drop Down di Blog

Membuat menu di blog seperti yang ada di blog saya ini merupakan suatu hal yang sangat sulit bagi blogger pemula seperti saya tapi dengan tips Membuat Menu di Blog yang saya akan share kali ini mungkin akan sedikit lebih mudah...

Nah langsung saja kita mulai...

Pertama anda login ke blog anda lalu klik Template > Edit Html > Lanjutkan > Expand Template Widget kemudian cari kode ]]></b:skin> (Gunakan Ctrl+F agar lebih mudah)

Copy Code di bawah ini lalu pastekan tepat diatas kode ]]></b:skin>

#NavbarMenu { background: #000; width: 400px; height: 10px; font-size: 15px; font-family: Trebuchet MS, Tahoma, Verdana; color: #ffd700; margin: 0px; padding: 0px; } #NavbarMenuleft { width: 400px; float: left; margin: 0; padding: 0; } #nav { margin: 0; padding: 0; } #nav ul { float: left; list-style: none; margin: 0; padding: 0; } #nav li { list-style: none; margin: 0; padding: 0; } #nav li a, #nav li a:link, #nav li a:visited { background: #222222; height: 15px; color: #ffd700; display: block; font-size: 15px; 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; } #nav li a:hover, #nav li a:active {background: #BBBBBB; color: #ff0000; margin: 0; padding-top:6px; padding-bottom:5px; padding-left:13px; padding-right:13px; text-decoration: none; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #222222; width: 150px; color: #ffd700; font-size: 15px; font-family: trebuchet ms,; font-weight: normal; text-transform: none; float: none; margin: 0; padding: 7px 10px; border: 1px solid #000; } #nav li li a:hover, #nav li li a:active { background: #BBBBBB; color: #ff0000; padding: 7px 10px; } #nav li { float: left; padding: 0; } #nav li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0; padding: 0; } #nav li ul a { width: 140px; } #nav li ul ul { margin: -32px 0 0 171px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #nav li:hover, #nav li.sfhover { position: static; }

Setelah itu anda bisa merubah warna font dan background sesuai selera anda kemudian klik “Simpan template” dan “Tutup”   jika sudah selesai.

Belum selesai sampai disitu sekarang anda klik Tata Letak > Tambah Gadget > Html Java Script lalu Pastekan kode di bawah ini di dalam konten :

<div class='menuhorisontal'>

<ul id='nav'>

 <li><a href='http://hendrajorge.blogspot.com'><span style="font-style:Bold;">Home</span></a> </li>

<li><a href='http://hendrajorge.blogspot.com'><span style="font-style:Bold;">Game</span></a>

<ul>

<li><a href='http://hendrajorge.blogspot.com/2012/06/download-gratis-plants-vs-zombies-2.html'><span style="font-style:bold;">Plants Vs Zombies 2</span></a>

<li><a href='http://hendrajorge.blogspot.com/2012/07/download-gratis-gutterball-2.html'><span style="font-style:bold; ">Gutterball 2</span></a>

</li></li>

</ul>

<li><a href='http://hendrajorge.blogspot.com'><span style="font-style:bold;">Software</span></a>

<ul>

<li><a href='http://hendrajorge.blogspot.com/2012/06/download-accelerator-plus.html'><span style="font-style:bold;">D.A.P</span></a>

<li><a href='http://hendrajorge.blogspot.com/2012/07/download-gratis-idm-611-build-8-final.html'><span style="font-style:bold;">IDM Final</span></a>

</li></li>

</ul>

<br class='clearit'/>

</li></li></li></li></ul></div>

<div style='clear:both;'></div>

Ganti Url (Biru) Menu (Merah) dan Sub menu (Hijau) sesuai blog anda masing – masing...

Kemudian Simpan alhasil menu sudah tersedia di blog anda...

Semoga bermanfaat...:D