Kode Warna Generator

Kedua tool di bawah ini akan membantu Anda untuk mendapatkan 6 digit dari kode warna yaitu heksadesimal value. Tool ini akan banyak membantu Anda dalam menyesuaikan template Blogger Anda dan untuk menulis posting yang lebih menarik. Mohon Ikuti petunjuk untuk setiap tool sebelum menggunakannya.

Kode Warna Generator

• Pertama tarik bar pada selector "Hue" ke arah atas hingga warna yang Anda inginkan.
• Kemudian klik di dalam area Brightness/ Saturation dan tarik kursor sampai Anda mendapatkan warna yang Anda inginkan. Daerah "Swatch" bar adalah hasil warna akhir yang Anda dapatkan.
• Hasil kode warna heksadesimal akan ditampilkan dalam kotak "Hex". Cukup copy kode enam digit i.e # 000000
• Itu saja!

Color Wheel untuk Mendapatkan Warna Yang Cocok

Ini adalah alat yang sangat berguna untuk mendapatkan warna yang cocok atau kohesif untuk navigasi menu, latar belakang, hyperlink, header, dan sebagainya. Petunjuknya sebagai berikut:

• Cukup paste kode warna enam digit dalam formulir di bawah ini tanpa tanda (#) hash dan kemudian tekan Pembaruan
• Kode warna yang cocok akan muncul dalam empat kotak di sisi kanan.
• Anda kemudian dapat meng-copy nilai hex dan mulai menggunakannya!

Semoga bermanfaat.... :)

Cara Membuat Widget Popular Post Blogger Menjadi Lebih Menarik

Saya jarang menggunakan tool kecuali saya tahu saya dapat merancang sesuai dengan preferensi saya. Tim Blogger memperkenalkan Widget Popular Post resmi mereka yang bisa menampilkan potongan posting Anda yang dapat dilihat bersama dengan gambar thumbnail berdasarkan statistik Analytics blog Anda. Tapi tunggu! widget kali ini merupakan langkah maju dari itu. Kami akan menimpa stylesheet  untuk widget ini sepenuhnya dengan kostum font dan warna. Anda dapat melihat widget Popular Post ini di sidebar blog saya.

Keuntungan terbesar dari widget ini adalah bahwa kita tidak perlu menginstal Javascript apapun yang berat karena kita menggunakan widget yang tersimpan pada server Blogger dan kita hanya akan mengubah tampilan untuk membuatnya menyatu sempurna dengan blog Anda.

Saya harap Anda akan mendapatkan tutorial yang cukup menarik kali ini karena saya akan memberikan trik sederhana tentang cara membuat widget popular post menjadi sangat menarik. Jadi mari kita mainkan!

Menambahkan Widget Popular Post ke Blog

• Login dulu ke Blogger > Layout
• Klik Add a gadget dan pilih gadget "Popular Post" dari daftar yang disediakan blogger
• Setinglah seperti gambar di bawah ini! (Ubahlah Most viewed menjadi 'All time', hilangkan centang pada 'image thumbnail' dan 'snippet')

• Simpan widget Anda
• Sekarang masuklah ke Template
• Backup dulu template Anda jika perlu
• Klik Edit HTML
• Carilah kode ini

]]></b:skin>

• Kemudian letakkan kode berikut ini di atasnya

/*--- Genera Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg15sI58P6Nl41GLxii6AoOXGDLEOcs1rIjWjOYKcjmZQg1dqgWaXSfEcDW-xYj8Ss_sy9OXK5E4RdILZFg1d50k-smofLpGDbbyCHo6ADLeEIGSDaQqaUaFrmlxcYc7MSZwPtJasMuQwuA/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Keterangan:

Anda dapat melakukan perubahan untuk menyesuaikan tampilan default dari kode di atas:

1. - Untuk mengubah gambar bullet, gantilah link gambar yang bercetak tebal pada kode di atas dengan URL bullet Anda.
2. - Untuk mengubah warna perbatasan dalam mode aktif editlah bagian ini#dddddd
3. - Untuk mengubah warna perbatasan pada saat ditunjuk mouse edit bagian ini#666666
4. - Anda dapat menggunakan Kode Warna CSS milik saya untuk mencari kode warna yang tepat.

• Dan terakhir, simpan Template Anda dan katakanlah bingo!

Kunjungi blog Anda untuk melihat apakah widget popular post sudah terpasang dengan baik pada sidebar blog Anda. Jangan beritahu saya jika Anda membutuhkan bantuan lebih lanjut dalam mengubah jenis font atau warna. Widget akan secara otomatis menggunakan warna standar dari blog Anda, tetapi jika Anda ingin mengubah untuk sesuatu yang berbeda maka jangan ragu untuk membiarkan saya tahu dengan mem-posting komentar Anda di bawah ini. :D

Jika Anda menyukai artikel ini dan ingin berbagi dengan pembaca Anda mengenai tutorial ini maka silahkan cantumkan linkback ke postingan ini. Salam damai kawan.. :)

15 Jalan Terbaik Untuk Meningkatkan Traffic Blog Anda

Satu-satunya tujuan dari setiap blogger adalah untuk mencapai peringkat Alexa tertinggi dan untuk mendapatkan traffic yang besar seperti itulah hal yang meningkatkan pendapatan bagi mereka. Tidak ada keraguan tentang pentingnya peringkat halaman dari sebuah blog atau website.

Berikut adalah 15 tips terbaik yang Anda butuhkan untuk mendongkrak traffic yang besar untuk blog Anda.

1. Konsisten

Tips pertama dalam daftar saya adalah konsistensi yang dibutuhkan oleh seorang blogger untuk memberikan tembakan yang terbaik secara terus menerus. Ini berarti bahwa Anda harus mencintai blog Anda dan harus posting setiap hari serta harus memberikan alasan untuk pembaca Anda untuk mulai mengandalkan situs Anda.

2. Backlink

Jika Anda memiliki mimpi yang besar tentang blog Anda, mulai berkonsentrasi untuk mendapatkan backlink lebih banyak. Sebenarnya backlink adalah link yang Anda dapatkan ketika situs lain me-link ke konten Anda. Hasilnya akan membawa traffic yang besar dari situs lain ke blog Anda.

3. Kirimkan ke Direktori

Ada beberapa direktori yang tersedia secara online di mana Anda harus mendaftarkan blog Anda.

4. Mempromosikan Situs Anda ke Forum

Biasakan untuk mengunjungi forum yang berhubungan dengan niche Anda. Jadilah pengguna aktif di sana dan sering hubungkan situs Anda untuk meningkatkan traffic.

5. Kirimkan Artikel ke Direktori

Setelah Anda mengirimkan blog Anda ke direktori, tugas berikutnya adalah untuk menulis beberapa potongan tulisan dan mengirimkannya ke direktori artikel. Ini akan memberikan traffic yang bagus untuk blog Anda ketika orang-orang mencari tentang topik yang terkait seperti milik Anda dan menemukan apa yang mereka cari di blog Anda.

6. Promosikan Blog Anda

Kita tidak bisa mengabaikan pentingnya iklan. Seperti pemasar lain, Anda juga harus mengiklankan blog Anda untuk mencapai lalu lintas yang baik.

7. Menulis Artikel di Blog Lain

Setelah Anda mengamati bahwa orang-orang sudah mulai mempertimbangkan blog Anda, ini merupakan salah satu langkah penting. Mulailah menulis posting tamu di blog lain untuk menyeret beberapa lalu lintas dari situs tersebut dengan Anda.

8. Tinggalkan Tanda URL-Identitas Anda

Ketika berkontribusi di situs yang berbeda seperti di forum dan berkomentar pada blog lain, tinggalkan URL blog Anda di sana. Hal ini dapat membawa lalu lintas ke blog Anda ketika orang pergi melalui kontribusi Anda.

9. Search Engine Optimization

Jika Anda berhasil masuk ke buku-buku yang baik dari mesin pencari, maka Anda tidak perlu apa-apa lagi, namun, mesin pencari tidak pernah terlalu turun ke bumi untuk pemula, pada kenyataannya banyak kerja keras yang dibutuhkan untuk untuk itu. Anda perlu belajar banyak tentang teknik SE0.

10. Kartu Bisnis

Anda seorang blogger bukan? Lalu apakah Anda memiliki kartu nama? Mayoritas dari Anda tidak harus membayar perhatian pada aspek ini. Buatlah Kartu Bisnis untuk Anda untuk mendapatkan keajaiban. Ini cara lain untuk mempromosikan blog anda dan memperkenalkan diri sebagai pro-blogger.

11. Gunakan Situs Sosial Networking

Beterimakasihlah pada teknologi, karena platform sosial networking seperti Facebook, Twitter, dan Google +, Anda dapat membagikan artikel dan postingan Anda kepada semua teman Anda dan meyakinkan mereka.

12. Bergabung Dengan Situs Sosial Bookmarking

Ada banyak situs bookmark seperti Digg, twitter, Reddit, Technorati, dll. Gunakanlah itu.

13. Gunakan Website Question & Answer (Q&A)

Ada banyak situs Q & A di mana Anda selalu dapat melayani orang dan menikmati traffic yang bagus untuk blog Anda. Situs seperti Yahoo memungkinkan Anda untuk menjawab pertanyaan yang berkaitan dengan niche Anda.

14. Hidupkan Blog Anda

Harus selalu ada sesuatu yang interaktif untuk pembaca di blog Anda yang harus mendorong pengunjung untuk datang kembali dan mengikuti perkembangan blog Anda.

15. Tambahkan Widget

Menggunakan widget seperti daftar isi dan RSS di website Anda yang memungkinkan pembaca untuk membiasakan diri dari situs Anda dengan mudah dan kemudian dapat dengan cepat memiliki pengunjung dari situs Anda.

Jadi, itu saja untuk saat ini, satu hal yang saya ingin katakan pada akhir ini, Anda harus memiliki kesabaran untuk semua ini. Kerja keras dan jangan menyerah.. :)

10 Strategi SEO Untuk Melindungi Blog Anda Terhadap Update Google Panda

Dengan rilis terbaru dari Google Penguin, berarti pembahasannya adalah semua tentang update algoritma Google dan bagaimana efeknya terhadap website. Dan pada tulisan saya kali ini, saya akan berbagi beberapa tips untuk melindungi blog/website dari update Google Panda. Google Panda adalah perubahan radikal pertama dalam model pencarian sejak beberapa tahun lalu. Dan pada dasarnya, itu bertujuan untuk menyingkirkan situs web berkualitas rendah dan mempertahankan situs web berkualitas tinggi di SERPs (Search Engine Result Pages). Banyak blogger melihat penurunan lalu lintas yang derastis dalam beberapa kasus, sementara beberapa juga memperoleh manfaat dari pembaruan ini. Dampak yang terjadi dari update ini berefek pada 12% dari total website ketika pertama kali dirilis.

Dengan pembaruan ini, kita dapat mengatakan bahwa Google menjunjung tinggi kualitas untuk banyak blogger. Kualitas yang baik dan SEO tingkat dasar menjadi wajib untuk dijaga agar sesuai dengan keinginan Google. Hingga saat ini ada sebagian website yang masih belum pulih dari gigitan sang Panda. Jadi di sini, saya akan berbicara tentang beberapa tips SEO yang akan membantu Anda mengatasi hilangnya lalu lintas dari Panda, dan melindungi website Anda dari update Panda yang merugikan website Anda.

Apa Jenis Website Yang Menjadi Sasaran?

• Kualitas yang Rendah - Ini sudah cukup jelas sekarang. Website dengan kualitas rendah atau konten yang minim akan merasakan akibatnya. Anda mungkin berpikir konten Anda berkualitas baik, tetapi kenyataannya adalah kualitas tidak hanya dilihat dari bahasa penulisan yang baik tetapi juga kuantitas yang adekuat, dan inter-linking yang baik.
• Peternakan Konten - Situs yang hanya mementingkan jumlah konten tapi tidak memperhatikan kualitas konten dan SEO yang memadai maka inilah yang akan jadi sasaran Google Panda.
• Duplikasi Konten - duplikasi konten sangat dibenci oleh semua orang, termasuk Google.
• Waktu Loading yang lama - Lakukan optimasi waktu loading blog Anda agar lebih cepat.
• Penggunaan iklan yang berlebihan - Saya pernah melihat banyak situs-situs yang memasang iklan di kiri, kanan, atas, bawah, dan dalam isi juga. Sebagai seorang blogger, saya tahu perasaan orang itu, karena ia ingin mendapatkan uang. Tapi sebagai seorang surfer web, I hate it! Pengetahuan yang kurang ini menjadi tidak baik di mata Google.
• Optimasi yang berlebihan - Menurut Google, hukuman juga akan diberikan untuk website yang menggunakan trik black-hat SEO untuk mendapatkan hasil teratas dengan konten kualitas rendah.

Tips Menghindar Dari Sasaran Google Panda
1. Tulislah Konten Yang Baik

Oke. Saya tahu saya telah mengatakan hal ini berulang-ulang. Jadi saya tidak akan mengulanginya (setelah ini sekali lagi). Jadi, Anda tahu Anda harus membuat kualitas konten yang baik. Tapi bagaimana caranya? Yah pertama-tama, tingkatkan tata bahasa Anda. Gunakan ejaan dan tata bahasa yang baik dan benar sesuai Kedua EYD :), tulislah sebuah paragraf intro yang baik untuk posting Anda. Tulislah artikel Anda di atas 400-500 kata. Gunakan Gambar dan video bila memungkinkan, dan sebagian besar dari semua, berilah interlink artar halaman Anda.

2. Membuang Konten Yang Berkualitas Rendah

Ini harus menjadi langkah pertama Anda. Cepat masuk ke arsip Anda, dan meninjau konten lama Anda. Ketika blog Anda masih baru, kemungkinannya Anda tidak menulis posting yang berkualitas saat itu. Entah memperbarui halaman tersebut, atau menghapusnya. Google akan memberi hukuman website pada domain-level. Jadi setiap posting yang buruk dapat menjadi link yang lemah yang akan dicari Google.

3. Singkirkan Iklan

Setelah Anda selesai membuang posting yang tidak berkualitas di arsip Anda, saatnya untuk membuang iklan Anda. Lihatlah website Anda dengan mata yang kritis, dan carilah setiap iklan yang berlebihan. Umumnya, satu banner di atas, satu iklan di samping, dan satu iklan lagi di konten itu masih wajar saja. Tapi jangan sampai melebihi batas. Jangan pernah menggunakan lebih dari satu iklan dalam konten dan lakukan optimasi pada iklan Anda. Menurut saya sih.

4. Aktif di Media Sosial

Sejak Google memperkenalkan tombol +1, sebenarnya Google mengharapkan orang untuk menggunakannya. Lebih banyak +1 yang Anda dapatkan pada konten Anda, Google akan lebih menyukainya. Dan ini bukan hanya tentang Google+. Anda harus aktif di media sosial lain juga. Google suka bila orang-orang dari berbagai media sosial datang ke situs Anda dan berbagi atau me-like konten Anda.

5. Singkirkan Duplikasi Konten

Anda mungkin sangat tahu bahwa plagiarisme adalah hal yang sangat buruk, dan Google membenci itu. Apa yang Anda mungkin tidak tahu adalah, Anda mungkin mendapat masalah jika orang lain menduplikat konten Anda. Setahu saya sampai sejauh ini Google tidak dapat membedakan secara akurat antara konten asli dan duplikat. Dengan demikian, Anda harus secara manual melakukan komplain terhadap konten duplikat tersebut. Jangan hanya mengabaikannya. Ajukan keluhan kepada Google terhadap situs yang menyinggung Anda.

6. Dapatkan Backlink Yang Baik

Orang-orang mungkin mengatakan sebaliknya, tetapi backlink adalah kekuatan yang harus diperhitungkan. Mereka benar-benar dapat membantu blog Anda dengan lalu lintas dan peringkat. Tetapi mereka backlink harus asli kualitas, dan baik. Bekerja membangun backlink dengan menulis posting tamu, artikel, dll Jangan pernah membeli backlink. Backlink tersebut bot dihasilkan, dan dianggap sebagai spam. Bukan hanya itu, mereka adalah backlink berkualitas rendah yang lebih berbahaya daripada baik untuk blog Anda. Google merengut backlink tersebut. Anda harus juga.

7. Pelajari Teknik Dasar SEO

SEO sangat penting. Saya mengatakan sebelumnya bahwa orang mendapat sanksi pada SEO yang berlebihan. Anda tidak perlu melakukan itu. Tapi Anda hanya perlu belajar teknik dasar SEO. Termasuk meta description, kata kunci dalam judul dan paragraf, optimasi gambar, dll. Pelajarilah 20 Teknik SEO milik saya untuk lebih jelasnya.

8. Jangan Mengindex Halaman Berkualitas Rendah

Jika Anda tidak ingin Google untuk mengindeks halaman berkualitas rendah, Anda hanya perlu melakukan noindex pada halaman tersebut. Ini hanya menyingkirkan halaman dari pencarian Google. Ini adalah cara yang baik untuk menyembunyikan halaman "About Us" atau "Kontak" Anda, yang hanya untuk pengguna saja.

9. Hindari Penggunakan Keyword Stuffing

Keyword stuffing berarti menggunakan kata kunci yang berlebihan. Hal ini dianggap sebagai teknik SEO black-hat. Menggunakan terlalu banyak kata kunci seperti menyerukan kehancuran yang akan datang pada konten Anda. Banyak kata kunci yang dibaca Google untuk diperiksa pada halaman. Tapi begitu Google melihat kata kunci dengan kepadatan tinggi, Google akan menganggap spamming. Jadi hindarilah praktik ini jika Anda masih menyukai situs Anda :).

10. Optimalkan Link Anda

Anda mungkin ingin mengalirkan traffic ke postingan lama Anda dari postingan yang baru. Hal ini bukan hanya memberikan nafas baru untuk postingan lama Anda, tapi juga membantu crawler menjelajah link Anda. Dan Google menyukai praktek ini. Sekarang, mari kita bicara tentang link out. Awaasi jumlah link dofollow yang Anda berikan. Anda berada dalam masalah serius jika Anda memiliki banyak link-out dari pada link-in. Google menganggap ini sebagai spam, karena siapa pun bisa membuat website dummy dan menambahkan link untuk melengkapi situs utama mereka.

Oke, itulah semua tips yang saya punya untuk saat ini. Saya akan memberikan tips-tips lain yang bermanfaat bagi Anda pada postingan selanjutnya. Tingkatkan rating blog Anda. :)

25 Menu Navigasi "Vertikal" Untuk Blogger - Kode CSS dan HTML

Pada postingan saya kali ini, saya akan menyediakan 25 Tab Menu Navigasi Vertikal yang menggunakan kode CSS dan HTML. Saya sudah memeriksa dan mencoba kode yang diambil dariChristopher dan Highdots dan hasilnya semuanya kompatibel dengan Blogger karena ada sebagian yang saya modifikasi. Saya berharap koleksi ini akan menarik bagi sebagian besar dari Anda karena tab menu navigasi ini bisa dengan mudah dapat Anda diinstal, disesuaikan dan dicopy! Saya berharap ini akan sangat membantu untuk desainer baru seperti saya :)

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/AVvXsEjmSfcWe9kWK8gr-OvoN4a47HicAnACJ8DmEHcHXei-vFWGhUKskGpOKm8h0fR5lLz7In0KAB8MAvHg1VcIlBfL5C0-692Hh5n8Is_0I2-KdfoUV-GUq9-eZ3VxCo6PkPTYpVRre8bNzIY/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmSfcWe9kWK8gr-OvoN4a47HicAnACJ8DmEHcHXei-vFWGhUKskGpOKm8h0fR5lLz7In0KAB8MAvHg1VcIlBfL5C0-692Hh5n8Is_0I2-KdfoUV-GUq9-eZ3VxCo6PkPTYpVRre8bNzIY/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/AVvXsEjIBmyi8useJuRc_f-7omWA0EVDBG0r4zTmBGiWFVUzZs5ceXfPTuQ-Rp8J01vz4PLMFG_FmJDCz9pusgFzsviOgLGGgmoU-V3EUi1SZrR4QMpsprU0JuKOXDGh4yBvJpqb8Vuu4ysVniE/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/AVvXsEjIBmyi8useJuRc_f-7omWA0EVDBG0r4zTmBGiWFVUzZs5ceXfPTuQ-Rp8J01vz4PLMFG_FmJDCz9pusgFzsviOgLGGgmoU-V3EUi1SZrR4QMpsprU0JuKOXDGh4yBvJpqb8Vuu4ysVniE/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/AVvXsEgFdc9HLd5m9_kZ4ylvr3gAsZuSit995da41X9hywo55ASfqNJKvY8ZJ5iuJU-LVAfP0AuSrdKIFhKNgWMtZSxKNlTy9S4DZmGCaC89AiBrGgZ38c8uSpPWw36JCDsqqdiNTpNrmXU6SAE/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFdc9HLd5m9_kZ4ylvr3gAsZuSit995da41X9hywo55ASfqNJKvY8ZJ5iuJU-LVAfP0AuSrdKIFhKNgWMtZSxKNlTy9S4DZmGCaC89AiBrGgZ38c8uSpPWw36JCDsqqdiNTpNrmXU6SAE/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/AVvXsEhKtQmHvFK0F2A5c4sfIroWywBCL875yi-elq6yRJ8Ski7IVW_FtoawbMqdsWqflrii1jTSteAZSOxtvm5kTIWr3j_uMPaK0ZpUZ703O77y4r0vucySWHVGiH246-LSOb9OYBQNMkVayEw/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/AVvXsEhKtQmHvFK0F2A5c4sfIroWywBCL875yi-elq6yRJ8Ski7IVW_FtoawbMqdsWqflrii1jTSteAZSOxtvm5kTIWr3j_uMPaK0ZpUZ703O77y4r0vucySWHVGiH246-LSOb9OYBQNMkVayEw/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/AVvXsEjxFsH-xh5_EP7m50T9AqJC7drCK7opahTteERKs2U1yy7LzkKqUGwJr4smWPVJyDLZ9R3HDwsTRziuQTcTnRRh0lXuETwelaqW7ZK-oy6iBo5OpUEvNmJVE_qpzp0IwOiBmAlHW_2OhM0/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/AVvXsEjxFsH-xh5_EP7m50T9AqJC7drCK7opahTteERKs2U1yy7LzkKqUGwJr4smWPVJyDLZ9R3HDwsTRziuQTcTnRRh0lXuETwelaqW7ZK-oy6iBo5OpUEvNmJVE_qpzp0IwOiBmAlHW_2OhM0/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/AVvXsEi344OINjBMWAb7vkCiDQrFx0XEB-4zVYrt3Eh2MxtEeebFh5Uiqn5mNHynjrjrma2ULkEfEjeYATPAFdo6ElmRbrfYesEN4gxLwMbSejlcMsboM6ygWweUdZVpBuqdf7nAHZLO650JaXc/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi344OINjBMWAb7vkCiDQrFx0XEB-4zVYrt3Eh2MxtEeebFh5Uiqn5mNHynjrjrma2ULkEfEjeYATPAFdo6ElmRbrfYesEN4gxLwMbSejlcMsboM6ygWweUdZVpBuqdf7nAHZLO650JaXc/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/AVvXsEgJHtXPllHMwhOtJ8x2N08Nbou176jK3UOzoASnE5CYZCFkFjX_N_UOeU2Fsnv0C3c3ipcqAReVeNDJwrMpSf4MPDXueR9Gihkc1GYlqkXhEUd4xak6lQXh2zRRc6_DW9yQMY18jvjxC6I/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/AVvXsEgJHtXPllHMwhOtJ8x2N08Nbou176jK3UOzoASnE5CYZCFkFjX_N_UOeU2Fsnv0C3c3ipcqAReVeNDJwrMpSf4MPDXueR9Gihkc1GYlqkXhEUd4xak6lQXh2zRRc6_DW9yQMY18jvjxC6I/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/AVvXsEgJHtXPllHMwhOtJ8x2N08Nbou176jK3UOzoASnE5CYZCFkFjX_N_UOeU2Fsnv0C3c3ipcqAReVeNDJwrMpSf4MPDXueR9Gihkc1GYlqkXhEUd4xak6lQXh2zRRc6_DW9yQMY18jvjxC6I/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/AVvXsEidEdpeW8am6r23emtP-wj9kJbP8t2WpsZD5LjFURFnSx7S9Hnid5Yw_6qJLNuRZaZIEV12gQg-w8Y5h0jiKSDcu5fGwYCToVJrT80t7Jcg35qmvtHMIwkqthJZe6rIloy5xVBvoquDNkI/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/AVvXsEidEdpeW8am6r23emtP-wj9kJbP8t2WpsZD5LjFURFnSx7S9Hnid5Yw_6qJLNuRZaZIEV12gQg-w8Y5h0jiKSDcu5fGwYCToVJrT80t7Jcg35qmvtHMIwkqthJZe6rIloy5xVBvoquDNkI/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/AVvXsEidEdpeW8am6r23emtP-wj9kJbP8t2WpsZD5LjFURFnSx7S9Hnid5Yw_6qJLNuRZaZIEV12gQg-w8Y5h0jiKSDcu5fGwYCToVJrT80t7Jcg35qmvtHMIwkqthJZe6rIloy5xVBvoquDNkI/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/AVvXsEi2aA-5cwYUoTUz5qYATs18TOhdUCTKOJpZ-5MBST5bLO_wpUPnvoetqZ-h8M9GKVs7RO451vpPft6HWHVC2oO7sS9ebPTt1-RQTVA4LNTwNEl-a9bVacgBgY7d68_KMlmjMVVHkUwL3uM/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2aA-5cwYUoTUz5qYATs18TOhdUCTKOJpZ-5MBST5bLO_wpUPnvoetqZ-h8M9GKVs7RO451vpPft6HWHVC2oO7sS9ebPTt1-RQTVA4LNTwNEl-a9bVacgBgY7d68_KMlmjMVVHkUwL3uM/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/AVvXsEiIKlHt9DcxeO4YoR8tzeprRExCgUPV-8v0gpAoKJXJDYrB1kCKMQl6EWKC5aKET57aSwKDig6fXsdxlVf4zJZos-iD_lkIba7kjNiCKVNn0K4aI-bMD4Aqf4zJeqvN0P41zctnGhHufok/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIKlHt9DcxeO4YoR8tzeprRExCgUPV-8v0gpAoKJXJDYrB1kCKMQl6EWKC5aKET57aSwKDig6fXsdxlVf4zJZos-iD_lkIba7kjNiCKVNn0K4aI-bMD4Aqf4zJeqvN0P41zctnGhHufok/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/AVvXsEjUPzM6N0o2eO2dJ8vpu2dhKk24AhlT-T-34Cjdub625xpZ1nJkSvjNCfXI9P12qr942WFtbMrClJj1vhB2-rGm3DQkXfQuyNisYQAKvNf2sX3lfeFl74_kVmG_fYvK2TBixusqM8qRJ6o/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/AVvXsEjUPzM6N0o2eO2dJ8vpu2dhKk24AhlT-T-34Cjdub625xpZ1nJkSvjNCfXI9P12qr942WFtbMrClJj1vhB2-rGm3DQkXfQuyNisYQAKvNf2sX3lfeFl74_kVmG_fYvK2TBixusqM8qRJ6o/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/AVvXsEjUPzM6N0o2eO2dJ8vpu2dhKk24AhlT-T-34Cjdub625xpZ1nJkSvjNCfXI9P12qr942WFtbMrClJj1vhB2-rGm3DQkXfQuyNisYQAKvNf2sX3lfeFl74_kVmG_fYvK2TBixusqM8qRJ6o/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/AVvXsEh4m1NnKStaROAuQrMJksSVQYbsQ_Zyd5CZukiUDqPF2LbB3aVekNOv8aTS5EvBGoKyI8Tv4eYxFWcakmIiJP4LkidIqbNu46zJslsi4zOpjhNoN5Z9f4wV9EUVkfeZY_129Da0-oOeDzo/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/AVvXsEh4m1NnKStaROAuQrMJksSVQYbsQ_Zyd5CZukiUDqPF2LbB3aVekNOv8aTS5EvBGoKyI8Tv4eYxFWcakmIiJP4LkidIqbNu46zJslsi4zOpjhNoN5Z9f4wV9EUVkfeZY_129Da0-oOeDzo/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/AVvXsEh4m1NnKStaROAuQrMJksSVQYbsQ_Zyd5CZukiUDqPF2LbB3aVekNOv8aTS5EvBGoKyI8Tv4eYxFWcakmIiJP4LkidIqbNu46zJslsi4zOpjhNoN5Z9f4wV9EUVkfeZY_129Da0-oOeDzo/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/AVvXsEioWuPdpW2D_x8IkMWm87h3a3RLqLn8cRUmAzFFisWVJOiFa4z7bP-ZkoVXFJwwKHcrSqZ83PVZCy7hSjixEw0mGmx1FjwPBaNvOH_0hCkTdvOktUcvGZkbqlKqDiwBAreQ1UdE5DYzPAM/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWuPdpW2D_x8IkMWm87h3a3RLqLn8cRUmAzFFisWVJOiFa4z7bP-ZkoVXFJwwKHcrSqZ83PVZCy7hSjixEw0mGmx1FjwPBaNvOH_0hCkTdvOktUcvGZkbqlKqDiwBAreQ1UdE5DYzPAM/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/AVvXsEjCZaVTzBkpRpVo2txhUDKp8ozP31aXcrvxuRaHxXtlRxn228q1MMQ4jCnKIrCHXiCpWAuUepJHBbyh_WVHpZK50rhOH4csW1P_UsumqYmV_c-4INWfFkLKS0kfGI3YqVPztL2TsUi1ZZ4/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZaVTzBkpRpVo2txhUDKp8ozP31aXcrvxuRaHxXtlRxn228q1MMQ4jCnKIrCHXiCpWAuUepJHBbyh_WVHpZK50rhOH4csW1P_UsumqYmV_c-4INWfFkLKS0kfGI3YqVPztL2TsUi1ZZ4/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/AVvXsEjKHZOe5PFHw7Td_mK9Bf70cockPxAATw67BWuV_5hFPaN9uo4DGuF3h-izOuueyNXytKNBkIMzihJGVKQYM1wrXtHwCx-uvKNMxxAZ1FjJzCP4amwvNkUIB8Q9BTIrdn_PkHvip5V45c8/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHZOe5PFHw7Td_mK9Bf70cockPxAATw67BWuV_5hFPaN9uo4DGuF3h-izOuueyNXytKNBkIMzihJGVKQYM1wrXtHwCx-uvKNMxxAZ1FjJzCP4amwvNkUIB8Q9BTIrdn_PkHvip5V45c8/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/AVvXsEgyr8xHFNV5WT4IXKgyyHWPG-hJ4KiItKbhuft49JmBwxzYPqrJr4PKXXwM3VvqZPs2rmPiaxvSk6pfAxIUk1QD-R08cO3EdOOrCYswRUcqjPQY0C-YdtwYSngDSFPAVR3JvyQeiB73QJc/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyr8xHFNV5WT4IXKgyyHWPG-hJ4KiItKbhuft49JmBwxzYPqrJr4PKXXwM3VvqZPs2rmPiaxvSk6pfAxIUk1QD-R08cO3EdOOrCYswRUcqjPQY0C-YdtwYSngDSFPAVR3JvyQeiB73QJc/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/AVvXsEhkVUmycu-SmsYy3zxcWtNWcexhpBIlgfhd3jT824NmXUIc41tM4YhGB0gsiA_A9sKrWGs924lznDIKUuIM3qQBAWF67IWkEEiasZ7BIPsYVSV2xuK4URHXnrO_4RABzNnvhq4wQwPRCts/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/AVvXsEhkVUmycu-SmsYy3zxcWtNWcexhpBIlgfhd3jT824NmXUIc41tM4YhGB0gsiA_A9sKrWGs924lznDIKUuIM3qQBAWF67IWkEEiasZ7BIPsYVSV2xuK4URHXnrO_4RABzNnvhq4wQwPRCts/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/AVvXsEhkVUmycu-SmsYy3zxcWtNWcexhpBIlgfhd3jT824NmXUIc41tM4YhGB0gsiA_A9sKrWGs924lznDIKUuIM3qQBAWF67IWkEEiasZ7BIPsYVSV2xuK4URHXnrO_4RABzNnvhq4wQwPRCts/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/AVvXsEgofunf0UtKQb4yaJTqnBMvH63oS6ix2DXbe0vqYTNsURYl88bFTowY1BnUv6sk2EshC7YahXqVShq4G4Rky5gYFqDPvJlUntfFxt49_XfDMUNmTICeQlBMvXA5pev0Cw9oyCPxdv8bDA8/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgofunf0UtKQb4yaJTqnBMvH63oS6ix2DXbe0vqYTNsURYl88bFTowY1BnUv6sk2EshC7YahXqVShq4G4Rky5gYFqDPvJlUntfFxt49_XfDMUNmTICeQlBMvXA5pev0Cw9oyCPxdv8bDA8/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/AVvXsEibDRW7Vl6kwCU2YNbn9lnNPJvHxoSZZwIKhrIQxs8gRwvw1jeSagMlmsgEOmKQ_O704jL4be28rXP51y1xfgJ4ecL5vTTDbOTiiq4ZlhoqZaI78AC-gLUEEC3wOMokb9awqokcM02eZd4/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/AVvXsEibDRW7Vl6kwCU2YNbn9lnNPJvHxoSZZwIKhrIQxs8gRwvw1jeSagMlmsgEOmKQ_O704jL4be28rXP51y1xfgJ4ecL5vTTDbOTiiq4ZlhoqZaI78AC-gLUEEC3wOMokb9awqokcM02eZd4/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/AVvXsEibDRW7Vl6kwCU2YNbn9lnNPJvHxoSZZwIKhrIQxs8gRwvw1jeSagMlmsgEOmKQ_O704jL4be28rXP51y1xfgJ4ecL5vTTDbOTiiq4ZlhoqZaI78AC-gLUEEC3wOMokb9awqokcM02eZd4/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/AVvXsEiOKhsPxhVq1p8yigdKJcdeV8SIGHUVmFBx-MwC2LLYOHw3PJRkcpHbA_aUAdFId_3RZzcM__Z0wFReBJQYNDzBPkhK6dFFjH9arUDQRaO5I52SuzXGp10MT31HSHUqZ5IY17dRdnEohS0/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKhsPxhVq1p8yigdKJcdeV8SIGHUVmFBx-MwC2LLYOHw3PJRkcpHbA_aUAdFId_3RZzcM__Z0wFReBJQYNDzBPkhK6dFFjH9arUDQRaO5I52SuzXGp10MT31HSHUqZ5IY17dRdnEohS0/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/AVvXsEg1DcteVGOt57ODBWBjzSS95A0rJnESp1VE7gJl6GwcmPE6bU95nXq0nIvc22tT3CzfMxjRRmEF0k-7Q-WzQJQDhdKQ8Z9VMartkDXrHKoC43heRQnoaZjMK-UAOUKniEuiwFW4E49iI_o/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1DcteVGOt57ODBWBjzSS95A0rJnESp1VE7gJl6GwcmPE6bU95nXq0nIvc22tT3CzfMxjRRmEF0k-7Q-WzQJQDhdKQ8Z9VMartkDXrHKoC43heRQnoaZjMK-UAOUKniEuiwFW4E49iI_o/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/AVvXsEiWqNii5pB30K20zcpAjGeSoAP7pQegidpJqSJXMRfR2zGHee92Ftp28Edb23P4xK8FJ-gLlNSAul3JAfmod4udsIIyvDYNp2qPdKu9tsVgIz0g4TMNKxZDEXOggV-dIBpdCPB1uxyLxkE/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqNii5pB30K20zcpAjGeSoAP7pQegidpJqSJXMRfR2zGHee92Ftp28Edb23P4xK8FJ-gLlNSAul3JAfmod4udsIIyvDYNp2qPdKu9tsVgIz0g4TMNKxZDEXOggV-dIBpdCPB1uxyLxkE/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>

Nah itulah 25 kode menu navigasi yang bisa saya persembahkan untuk Anda. Nantikan informasi menarik lainnya dari D-Genera Blog.. ^^ 2XFUZ2E47HKU