Membuat Menu Custom Dropdown

Bismillah
kali ini kita akan belajar cara membuat menu sendiri, jadi bisa kita edit sesuka kita, tampilannya juga bisa kita ganti2, seperti yg di bawah ini.... gmana???

• Home
• Facebook
• Yahoo!
• Twitter
• Youtube

lihat menu di atas?? sepertinya biasa aja, tapi sebenarnya Menu diatas merupakan contoh Menu Drop-Down Unik...
Menu tersebut sangat cocok untuk tampilan blog anda karena ukuran dan tampilan yang unik yang cocok untuk tampilan di menu blog anda..
Tertarik untuk memasangnya?
Oke Langsung saja Copy Paste kode nya dibawah ini dan taruh di sidebar, caranya bisa kamu baca di " cara memasang html di sidebar"
untuk kodenya, silahkan ganti yang berwarna biru  dengan url/alamat link kamu. untuk yanga hijau, silahkan ganti dengan judul menu yg kamu inginkan

<!--Menu Drop-Down Unik-->

<center><div id="menu">

<ul>

<li><a class="current" href="http://santri-one.blogspot.com">Home</a></li>

<li><a href="http://facebook.com">Facebook</a></li>

<li><a href="http://id.yahoo.com">Yahoo!</a></li>

<li><a href="http://twitter.com">Twitter</a></li>

<li><a href="http://www.youtube.com">Youtube</a></li>

</ul>

</div></center>

<style>

*{

margin:0;

padding:0;

}

#menu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pcdN-guCc93y1jZMUIHRLBWKaE0axUl9v0Qf8F3g5xGUUVuG2VwukGXjH0cyOovnG4SZ6IODKw6jmlfcFg3krF2oIJsjrcVdsvqExbiIhKCa0JNvpjP6AqFFCJaQEm6gjjmXm2GIzGs/s1600/menu_026_bg.jpg) no-repeat;

width:172px;

height:193px;

padding:15px;

}

#menu ul{

list-style:none;

padding:0 0 0 8px;

}

#menu li{

list-style:none;

display:block;

padding:10px 0;

}

#menu li a{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0jE3LBT9ivd0G8O3TkveREYuRqYJk6DKbogNK8gNQ970J1A5lmg5IN7hzdvixTA9nsNGUMVOKcOTjbPJasgDE9vS-2BhVKndP8A7apnVLhcB_3Aq0yaFWuHA7rE53kY9bfol09RmdoXy-/) no-repeat left center;

color:#ffe991;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

line-height:1.5em;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

text-decoration:none;

}

#menu li .current{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a.current, #menu li a:hover.current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt7B7p01o0Cu_VMOdzyETf_zZLx2GpX4tgUnjWOuGbuC21g_c9a3R8nMNhAbkIP0drj3nvfThFv9BJgXvOjMyE_KsgdQxfp41V4aX2tM3G5flS9SkbIPg0pm-suXtcpd3ndu2ovVFjIVz/) no-repeat left center;

color:#fff;

text-decoration:none;

}

</style>

<!--santri-one.blogspot.com-->

salam sahabat blogger dari santri-one

Jangan Lupa Baca yang ini Lho yach..:

tutorial blogger

• Membuat Tabel Pada posting Blog
• Memasang Emoticon KaskuSer
• Membuat Widget Top Comment
• Cara membuat Animasi Teks Membesar Part1
• Kode warna Untuk Blog
• Memasang Google Translate di sidebar
• Membuat Animasi yang berterbangan di blog
• Mengenal Widget/ Gadget Blogger
• Membuat Widget new post/ posting terbaru yang unik
• Cara membuat kotak Komentar terbaru" dengan fungsi scrollBox
• Memasang Radio Streaming Di blog/ website
• Membuat Efek Link Pelangi
• Cara membuat Teks/ Tulisan Berjalan
• Cara Membuat Menu 3 Tab View
• Membuat Buku tamu Tersembunyi
• Cara Memasang Jam di Sidebar Blog
• Cara Membuat Author Box / kotak penulis
• Cara Mengganti Nama Blog
• Cara Setting Pengaturan Blogger
• Cara membuat Buku Tamu Di Blog
• Mengenal Istilah-istilah dalam Blogger
• Cara Memasang Google Translate
• Situs Penyedia Template Blogger
• Cara mengganti Template Blogger

mempercantik blog

• Membuat Tabel Pada posting Blog
• Memasang Emoticon KaskuSer
• Membuat Widget Top Comment
• Kode warna Untuk Blog
• Membuat Animasi yang berterbangan di blog
• Membuat Widget new post/ posting terbaru yang unik
• Cara Menambahkan Sesuatu Di Sidebar
• Memasang Radio Streaming Di blog/ website
• Membuat Efek Link Pelangi
• Generator widget ( grunge heart )
• Cara membuat Teks/ Tulisan Berjalan

widget blogger

• Memasang Emoticon KaskuSer
• Membuat Widget Top Comment
• Html Encoder untuk menampilkan script pada posting
• Memasang Google Translate di sidebar
• Membuat Animasi yang berterbangan di blog
• Mengenal Widget/ Gadget Blogger
• Membuat Widget new post/ posting terbaru yang unik
• Cara membuat kotak Komentar terbaru" dengan fungsi scrollBox
• Cara Menambahkan Sesuatu Di Sidebar
• Memasang Radio Streaming Di blog/ website
• Membuat Tulisan ʞılɐqɹǝʇ
• Generator widget ( grunge heart )
• Memasang Profil Facebook Di blog
• Cara Membuat Menu 3 Tab View
• Membuat Buku tamu Tersembunyi
• Cara Memasang Jam di Sidebar Blog
• Cara Membuat Author Box / kotak penulis
• Cara membuat Buku Tamu Di Blog
• Cara Memasang Google Translate