25 Menu Side Bar Vertikal Super Keren!

Halo... Selamat datang di artikel 25 Menu Side Bar Vertikal Super Keren!

Bagaimana Cara Menambahkan Menu Navigasi Vertikal di Blogger?

Nah, proses ini sangat sederhana dan cukup mengikuti langkah-langkah berikut ini dengan hati-hati:

• Masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang Expand Widget Templates
• Paste kode CSS dari Menu yang Anda pilih tepat di atas kode ]]></b:skin>
• Untuk kode HTML bisa ada 2 posisi yang baik yaitu di sidebar kanan atau kiri. Tergantung berapa banyak kolom yang Anda miliki:
• Jika Anda memiliki sidebar di kanan, paste kode HTML di bawah kode <div id='sidebar-wrapper'>  atau <div id='sidebar-wrapper-right'>
• Jika Anda memiliki sidebar di kiri, paste kode HTML di bawah kode <div id='sidebar-wrapper-left'>
• Anda juga bisa langsung memasukkannya melalui gadget dengan cara masuk ke Layout > Add a Gadget > HTML/JavaScript, pastekan script HTML dari menu yang Anda pilih di dalamnya.
• Terakhir, simpan template Anda dan lihatlah perubahan yang terjadi

Catatan: Karena kebanyakan template menggunakan coding yang berbeda dan apabila Anda tidak dapat menemukan kode di atas maka silahkan tulis pesan di kotak komentar. Mungkin saya bisa membantu Anda.

Cara Mengedit Link Dalam Menu Navigasi

Untuk mengubah Link Tab Menu dan Judul, cukup mengedit bagian yang bercetak tebal dari kode HTML seperti contoh ini:

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link 5</a></li>

Ganti # 1, # 2, # 3 dll dengan URL/Link Anda dan ganti Link1, Link2, Link3 dll denganJudul Halaman Anda. Jika Anda ingin menambah atau menghapus tab maka cukup menambahkan atau menghapus baris dari kode HTML berikut:

<li><a href="#" >Link</a></li>

25 Menu Navigasi Vertikal

Menu #1

Kode CSS

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHS_Zciv_LS7QzJOogMSNGDi98Az28fRxQ5fT3WDkiwEA9u35pm_aIiFdVsRNK807Ad4FaGj68_0IKjKg6QK9WWNDpTot13zfV-i5a-jaO_88mGnMFnjI3bdsenKIAXX7UYbTo9Zon_Gw/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHS_Zciv_LS7QzJOogMSNGDi98Az28fRxQ5fT3WDkiwEA9u35pm_aIiFdVsRNK807Ad4FaGj68_0IKjKg6QK9WWNDpTot13zfV-i5a-jaO_88mGnMFnjI3bdsenKIAXX7UYbTo9Zon_Gw/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; } 

Kode HTML

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #2

Kode CSS

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7JM3MVna4O3fLznlvFNHgTlqAUx50aFEEzfvDT1Awih59pZIRSs0SqnVgNYvBtM35LUmF8MZkdRsLAFyvZtOjrbmo_6bo8Xj_Os7fD4tza_O2S1S-Javpe4N082UFRYwS7VgczERbxM/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD7JM3MVna4O3fLznlvFNHgTlqAUx50aFEEzfvDT1Awih59pZIRSs0SqnVgNYvBtM35LUmF8MZkdRsLAFyvZtOjrbmo_6bo8Xj_Os7fD4tza_O2S1S-Javpe4N082UFRYwS7VgczERbxM/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #3

Kode CSS

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NwuJeLZyv3s5zTsi70XQT9-4K3QWepBVJlFgnYzk3Wub4X7sS_umVXMI-fsfsB85qK7LvOWQwstyu4LmQMV6qlTKyeVb-doziaz_suxBecdMDPjBe2OeFfuo4yfdLRIoFVQF5TAzxBg/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-NwuJeLZyv3s5zTsi70XQT9-4K3QWepBVJlFgnYzk3Wub4X7sS_umVXMI-fsfsB85qK7LvOWQwstyu4LmQMV6qlTKyeVb-doziaz_suxBecdMDPjBe2OeFfuo4yfdLRIoFVQF5TAzxBg/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

Kode HTML

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #4

Kode CSS

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJc4Z04DdJcTA8fHLA-3c9sW9A8hBRsJJ-6m3xbFachS9RtRbnYgS0RzMqFqpvt8_aUO_McZ3cBDinUE1GJA8wsSL3krv9yxoYyuumYcysF-PpmB4qHt2rz2IMq-kgkVGOUbvkbSmb5HA/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJc4Z04DdJcTA8fHLA-3c9sW9A8hBRsJJ-6m3xbFachS9RtRbnYgS0RzMqFqpvt8_aUO_McZ3cBDinUE1GJA8wsSL3krv9yxoYyuumYcysF-PpmB4qHt2rz2IMq-kgkVGOUbvkbSmb5HA/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #5

Kode CSS

 #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoe8T93yh4Lhmg__G56NqXV6oTBYBfSHUTJSsBEzAbC-cjsbOx8l1ipk4gcWs71bhvuOtAg2VlxF9Kmne5GtKmE_bBlO-FypTTs25z6a0pg1gw5tktkFNcDjJHlL0tuj8N9R2QGUiwFMU/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoe8T93yh4Lhmg__G56NqXV6oTBYBfSHUTJSsBEzAbC-cjsbOx8l1ipk4gcWs71bhvuOtAg2VlxF9Kmne5GtKmE_bBlO-FypTTs25z6a0pg1gw5tktkFNcDjJHlL0tuj8N9R2QGUiwFMU/s800/menu14.gif); padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #6

Kode CSS

 #menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXbV4no-gdvZcYzhuD1OVsrnRmPG3shbRtLFdrzlytIOkyshJcuwzyK0oQdq56UBuBChMYJoMbK-FRbJp2Tu98oTrXqm2rkhKFr1d_wXsaK6R_yvdSU9wzBiXn2wipSV0mufLXwYegh-g/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXbV4no-gdvZcYzhuD1OVsrnRmPG3shbRtLFdrzlytIOkyshJcuwzyK0oQdq56UBuBChMYJoMbK-FRbJp2Tu98oTrXqm2rkhKFr1d_wXsaK6R_yvdSU9wzBiXn2wipSV0mufLXwYegh-g/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #7

Kode CSS

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySabed7TzCskF9yLFK6dpwHXRguLrvR0ancCSiFx3NRss1GJWxmEXGZpgS40EwXSa7w6Tw3OGJkwiMVY6aRiG-6MlY0IC5o0J3UO0WrWdPslsK4hUf1TfAJvgnqWaDR_MboK6Dbr1nPU/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySabed7TzCskF9yLFK6dpwHXRguLrvR0ancCSiFx3NRss1GJWxmEXGZpgS40EwXSa7w6Tw3OGJkwiMVY6aRiG-6MlY0IC5o0J3UO0WrWdPslsK4hUf1TfAJvgnqWaDR_MboK6Dbr1nPU/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhySabed7TzCskF9yLFK6dpwHXRguLrvR0ancCSiFx3NRss1GJWxmEXGZpgS40EwXSa7w6Tw3OGJkwiMVY6aRiG-6MlY0IC5o0J3UO0WrWdPslsK4hUf1TfAJvgnqWaDR_MboK6Dbr1nPU/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #8

Kode CSS

 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg80R-9GQHmXdxZ8Rwi1mrTaJBU5R73Auk4OEwWYFGj2zxjpXT-zAnxXN248LSL5nwFevBb9D08lYjjeK95sYwxUfBU6bdSsrMfjjk0SKa-MLNqWwe_DBMlM0OzVTM8bU_EYbUfYjulKds/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg80R-9GQHmXdxZ8Rwi1mrTaJBU5R73Auk4OEwWYFGj2zxjpXT-zAnxXN248LSL5nwFevBb9D08lYjjeK95sYwxUfBU6bdSsrMfjjk0SKa-MLNqWwe_DBMlM0OzVTM8bU_EYbUfYjulKds/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg80R-9GQHmXdxZ8Rwi1mrTaJBU5R73Auk4OEwWYFGj2zxjpXT-zAnxXN248LSL5nwFevBb9D08lYjjeK95sYwxUfBU6bdSsrMfjjk0SKa-MLNqWwe_DBMlM0OzVTM8bU_EYbUfYjulKds/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #9

Kode CSS

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7auCAoCscB2AWIHUAnc_ADdFz063vJP9-OoEezQ7U7jI6u6Ip46CFThsSa7JXFKcRob6zdgMcrmaYtRvcS6HPHA6KkMQbzma2umSZFlh-4m5X6InSZTI_u7_EUOVSiL0CbTWZHX0RYdY/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7auCAoCscB2AWIHUAnc_ADdFz063vJP9-OoEezQ7U7jI6u6Ip46CFThsSa7JXFKcRob6zdgMcrmaYtRvcS6HPHA6KkMQbzma2umSZFlh-4m5X6InSZTI_u7_EUOVSiL0CbTWZHX0RYdY/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; } 

Kode HTML

 <div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #10

Kode CSS

#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV71c_e-mExFO0QuMMgSoaKWTtQjQVSh1lqYk0ZjgTYfPwEhjLVnM4j8IxuaGC1S4oiB_Vt8t1kZxGQn_yEdHlXuoePIi9YeNI126QajxXJ8Mg6XWbRa6Z8B2fz-xVn1giQ8yBU7tu8wg/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV71c_e-mExFO0QuMMgSoaKWTtQjQVSh1lqYk0ZjgTYfPwEhjLVnM4j8IxuaGC1S4oiB_Vt8t1kZxGQn_yEdHlXuoePIi9YeNI126QajxXJ8Mg6XWbRa6Z8B2fz-xVn1giQ8yBU7tu8wg/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #11

Kode CSS

 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsmAk6j13mXlquotmlu9OXQ5lApFCHGXkU0Lvh1Mc6NUR5MtWt1DefDNVWsI8QcFqQ6_Ybgw4r84ZRZCKMjerGtSEp0z60iy6ZjQSPAUECVa18ci5v4LH2wcSSMnWB4mhuxbB5fb9c59c/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsmAk6j13mXlquotmlu9OXQ5lApFCHGXkU0Lvh1Mc6NUR5MtWt1DefDNVWsI8QcFqQ6_Ybgw4r84ZRZCKMjerGtSEp0z60iy6ZjQSPAUECVa18ci5v4LH2wcSSMnWB4mhuxbB5fb9c59c/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsmAk6j13mXlquotmlu9OXQ5lApFCHGXkU0Lvh1Mc6NUR5MtWt1DefDNVWsI8QcFqQ6_Ybgw4r84ZRZCKMjerGtSEp0z60iy6ZjQSPAUECVa18ci5v4LH2wcSSMnWB4mhuxbB5fb9c59c/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #12

Kode CSS

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Kode HTML

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #13

Kode CSS

 #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuw9TDjPbAH1ukRTgLTbomKrU7CA_juNlC-Cn1yeNeilku4o3cN4x2lOvJYwr4C6sb6crJARs2cP142bTyRcCKdF0rvalh1yYYyI4zyCfN1oEjljjs0CX56B3uRMfgO18yC6o6qM56aPY/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuw9TDjPbAH1ukRTgLTbomKrU7CA_juNlC-Cn1yeNeilku4o3cN4x2lOvJYwr4C6sb6crJARs2cP142bTyRcCKdF0rvalh1yYYyI4zyCfN1oEjljjs0CX56B3uRMfgO18yC6o6qM56aPY/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuw9TDjPbAH1ukRTgLTbomKrU7CA_juNlC-Cn1yeNeilku4o3cN4x2lOvJYwr4C6sb6crJARs2cP142bTyRcCKdF0rvalh1yYYyI4zyCfN1oEjljjs0CX56B3uRMfgO18yC6o6qM56aPY/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

Kode HTML

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #14

Kode CSS

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUwjYDw1l29z6DHIq8at6z1Hw35hnXvj9uzOtOdDvoyTdR0n6I54b-Cq_FEdt0YORhCOFkwOxtGLs6eZq2NYGcFW-Z5cOASa3UBstEjl4Fxf5iMlUfdEzDskgcHYD-IkReA8qQyinrQs/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUwjYDw1l29z6DHIq8at6z1Hw35hnXvj9uzOtOdDvoyTdR0n6I54b-Cq_FEdt0YORhCOFkwOxtGLs6eZq2NYGcFW-Z5cOASa3UBstEjl4Fxf5iMlUfdEzDskgcHYD-IkReA8qQyinrQs/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Kode HTML

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #15

Kode CSS

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJR15PZ7FPvwVz3mz3uQqyOJmtOw2ZI5zknkeVKFb3EI0ysfJ3rEjQgQI0adh3ovHteBwFNiZkDbYeekFEOvUfas3Yb0Y3uxbGJAONjF450XN6xUBwH9es9nUO01ifoqqDGv4r8Hmc0U/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCJR15PZ7FPvwVz3mz3uQqyOJmtOw2ZI5zknkeVKFb3EI0ysfJ3rEjQgQI0adh3ovHteBwFNiZkDbYeekFEOvUfas3Yb0Y3uxbGJAONjF450XN6xUBwH9es9nUO01ifoqqDGv4r8Hmc0U/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #16

Kode CSS

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

Kode HTML

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #17

Kode CSS

 #menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bftw9Ywyzeb67v4ayzvTTLhPmHZySaSJOJS-xtmYSo9Mq1Wb9Al60FFlQMLP53kkCCwbbQJe9MZ9W6P222fUK99o59tdyJ2LKEEbKnfhA4HN-4IzWz_ApSTHopQ-w_6-9zpTLymG2T8/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bftw9Ywyzeb67v4ayzvTTLhPmHZySaSJOJS-xtmYSo9Mq1Wb9Al60FFlQMLP53kkCCwbbQJe9MZ9W6P222fUK99o59tdyJ2LKEEbKnfhA4HN-4IzWz_ApSTHopQ-w_6-9zpTLymG2T8/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #18

Kode CSS

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Md6B8zjbT3DAGPzvAQ3nIleVbr8q8EFCNuyvyG1UltgYLxH1enfyP5KzWoUujjn4ymmycjcp5NggSHWvW_8lNN4LJvjhmOJxKxOUUv2N1S-RSHw7pajQXfCZ2TyqPKkr-nbJsYi_rvs/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Md6B8zjbT3DAGPzvAQ3nIleVbr8q8EFCNuyvyG1UltgYLxH1enfyP5KzWoUujjn4ymmycjcp5NggSHWvW_8lNN4LJvjhmOJxKxOUUv2N1S-RSHw7pajQXfCZ2TyqPKkr-nbJsYi_rvs/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Kode HTML

<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #19

Kode CSS

 #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

Kode HTML

 <div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #20

Kode CSS

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BEpS4v-RHFvKnnzYf2aMxQpefyhMzIh-WRSSGQgB0_LnyvEGztB3pmxANXt7KcNlfirfatjCux3iRAArHtqbKlVFxold93p10_iFzVvSSRN6DIjQ-Dm2ridtqlfX1TtEWMBw2lJN7ro/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BEpS4v-RHFvKnnzYf2aMxQpefyhMzIh-WRSSGQgB0_LnyvEGztB3pmxANXt7KcNlfirfatjCux3iRAArHtqbKlVFxold93p10_iFzVvSSRN6DIjQ-Dm2ridtqlfX1TtEWMBw2lJN7ro/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BEpS4v-RHFvKnnzYf2aMxQpefyhMzIh-WRSSGQgB0_LnyvEGztB3pmxANXt7KcNlfirfatjCux3iRAArHtqbKlVFxold93p10_iFzVvSSRN6DIjQ-Dm2ridtqlfX1TtEWMBw2lJN7ro/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #21

Kode CSS

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-_3Fo__3QfHh2p_EhsVd9tbPIOIQmwMtQhmJa49zP_EmaC3OxmtcqgSQq2nqgswZy5HgnIFgjXU8sako8HqxLe-bECQ54yKXIndhhycrdT3y37TJFD6c31bGZi6WpGHTTndQqLP1CbM/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv-_3Fo__3QfHh2p_EhsVd9tbPIOIQmwMtQhmJa49zP_EmaC3OxmtcqgSQq2nqgswZy5HgnIFgjXU8sako8HqxLe-bECQ54yKXIndhhycrdT3y37TJFD6c31bGZi6WpGHTTndQqLP1CbM/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

Kode HTML

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #22

Kode CSS

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEoAYwBty8ZeCDlbsQhqc__d_J2glhZFhb9rhPysH3e_azFm8Ai0D7SiXwkMTdC27FtGtjwFv0IYTDohwG_dof4GAxIkos_ACSq1GGIH_-818nRinrjry-2odjXPKvmpBtn6ZlhuzONY/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEoAYwBty8ZeCDlbsQhqc__d_J2glhZFhb9rhPysH3e_azFm8Ai0D7SiXwkMTdC27FtGtjwFv0IYTDohwG_dof4GAxIkos_ACSq1GGIH_-818nRinrjry-2odjXPKvmpBtn6ZlhuzONY/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGEoAYwBty8ZeCDlbsQhqc__d_J2glhZFhb9rhPysH3e_azFm8Ai0D7SiXwkMTdC27FtGtjwFv0IYTDohwG_dof4GAxIkos_ACSq1GGIH_-818nRinrjry-2odjXPKvmpBtn6ZlhuzONY/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

Kode HTML

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #23

Kode CSS

 #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4RlNnKThDzUaKdCyyBxe5hVgeazckzzT4ReNXJTsKOXaST-oOAkS3T13nUJd3tpgfoYgf0jimJlBBzN06XrcVqeEwzoaPhhAJm3npXI5X2A9CKwNpGM9oYNX-rBUV2htzD_L4ua1hXA/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE4RlNnKThDzUaKdCyyBxe5hVgeazckzzT4ReNXJTsKOXaST-oOAkS3T13nUJd3tpgfoYgf0jimJlBBzN06XrcVqeEwzoaPhhAJm3npXI5X2A9CKwNpGM9oYNX-rBUV2htzD_L4ua1hXA/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #24

Kode CSS

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzaA9zXj5VxEJfpaXhENegqJxrv3ZH3BrTznB-GvaBBAlL1dAXQWhz-Pv9Vmq3EnCnhZuSXkJJNGevTT0bPVSnkXzVv9J6Hui9MsHu6ZjvvzFeTBkHBEoRg5_RDrIGWe07XRdfBDWegM/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkzaA9zXj5VxEJfpaXhENegqJxrv3ZH3BrTznB-GvaBBAlL1dAXQWhz-Pv9Vmq3EnCnhZuSXkJJNGevTT0bPVSnkXzVv9J6Hui9MsHu6ZjvvzFeTBkHBEoRg5_RDrIGWe07XRdfBDWegM/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #25

Kode CSS

 #menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_NjfHJCPawXm_xGIKk_yLzsklWaUp_L095kQnR4MAg-5KgadseTEhp9ZEI8nyA64QUM641WaqzOgqwEWF1FZ5qt9xc3H6ln8yehpoSPWrygLAwipom9Q64KnhhbleE5WawSRNGvhPYU/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE_NjfHJCPawXm_xGIKk_yLzsklWaUp_L095kQnR4MAg-5KgadseTEhp9ZEI8nyA64QUM641WaqzOgqwEWF1FZ5qt9xc3H6ln8yehpoSPWrygLAwipom9Q64KnhhbleE5WawSRNGvhPYU/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Okelah...Itu saja yang bisa di share...kali ini...Semoga bermanfaat yaa.