Cara Membuat Menu Horizontal CSS Simple Black Blogger/Blogspot

Menu horizontal sering dijumpai di banyak blog/website sebagai navigasi/menu utama. Di blog Blogger/Blogspot kita pun dapat dengan mudah membuatnya, bahkan hanya dengan CSS dan HTML.

Pada posting perdana CSS Horizontal Menu untuk Blogger/Blogspot kali ini, saya persembahkan kepada sobat Blogger semua "Simple Black Tabbed Horizontal Menu for Blogger Blog"
Cara memasang widget menu horizontal menu di Blogger/Blogspot:
1. Masuk ke dashboard > Design/Rancangan > edit HTML
2. Masukkan kode CSS tepat di ATAS ]]></b:skin> (gunakan Ctrl + F untuk mencari)
 Kode CSS:
ul#menu {width: 100%;height: 43px;background: #FFF url("http://1.bp.blogspot.com/-DuGYqFkJQs4/Tcuap0ixU7I/AAAAAAAAAdw/0KO6hmh7-yM/s1600/menu-bg.gif") top left repeat-x;font-size: 0.8em;font-family: "Lucida Grande", Verdana, sans-serif;font-weight: bold;list-style-type: none;margin: 0;padding: 0;}
ul#menu li {display: block;float: left;margin: 0 0 0 5px;}
ul#menu li a {height: 43px;color: #777;text-decoration: none;display: block;float: left;line-height: 200%;padding: 8px 15px 0;}ul#menu li a:hover {color: #333;}
ul#menu li a.current {color: #FFF;background: #FFF url("http://2.bp.blogspot.com/-t9vkEKC1ATA/TcuW-EFUaoI/AAAAAAAAAdg/zg6gbrI9u9A/s1600/current-bg.gif") top left repeat-x;padding: 5px 15px 0;}
3. Save template.
4. Copy Kode HTML, ganti #(url homepage anda) dengan url homepage blog, dan  # dengan url-url lain yang ingin dipasang di menu. Ganti kata-kata Home, Daftar Isi Blog, dan lain-lain dengan anchor text yang diinginkan.
Kode HTML:
<ul id="menu">
<li><a class="current" href="#(url homepage anda)">Home</a></li>
<li><a href="#">Daftar Isi Blog</a></li>
<li><a href="#">Contact Me</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">SMS Gratis!</a></li>
</ul>
Contoh:
<li><a class="current" href="http://buka-rahasia.blogspot.com">Home</a></li>
Jika ingin menambah atau mengurangi link menu, tambah atau hapus baris:
<li><a href="#">anchor text</a></li> sebelum </ul>.

5. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget
6. Setelah pop up window muncul, pilih opsi HTML/Javascript
7. Kemudian masukkan Kode HTML yang telah diedit ke kolom configure HTML/Javascript.

 
7. Klik save.
8. Drag/geser widget menu horizontal tersebut ke bawah/atas header. 
9. Save lagi.
10. Done!

Re-encoded and modified for Blogger/Blogspot Blogs by: Ahmad Khoirul Azmee.
Credits to coder: cssmenumaker
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Menu Horizontal CSS Simple Black Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 40 Comment(s):

Suwardi said...

mas mau tanya, saya udah buat menu navigasi dengan keriteria 0-9 dan a-z tapi masih ngubeng mas,
liat aja di www.5seconds.co.cc optionnya kategori saya mohon pencerahannya mas saya sudah buat 34 jam full tapi belum juga work...nanti tinggalkan pesan ditempat saya... Thanks

Ahmad Khoirul Azmee said...

SOri baru balas bro, baru saja pulang dari tugas luar kota. Oke nanti saya cek dulu ya.

Ahmad Khoirul Azmee said...

oh, ini anda harus memasukkan link ke dalamnya bro, ganti "#" dengan url link yang ingin anda masukkan sesuai angka atau abjad. jadi anda bikin label dulu, 0-9, dan A. B, C, D, dst....... kemudian setelah link label terbuat, masukkan masing2 url tersebut menggantikan "#" di bagian link menu, misalnya label http://www.5seconds.co.cc//search/label/a, pasang menggantikan # untuk menu bernama A dan seterusnya. pengelompokan posting silahkan ditambahkan label sesuai huruf awal dan yang berawalan angkan (0-9) jadi satu.

charo said...

mantap gan

Andri wijaya said...

mas mau tanya, cara agar waktu mouse nunjuk ke menu truz kluar pilihan menu lagi dibawahnya gmna ya???
mohon di balas

Ahmad Khoirul Azmee said...

itu namanya horizontal DROPDOWN menu, beda dengan ini. cari dengan keyword itu di google. ada banyak yang punya tutorialnya.

Rendy Rizaldy said...

nice masbro.
visitback y

Cek Info said...

wew keren sob :o
makasi y cara d atas uda ane pake :D
maksudny menuny ane peke :D

lombok21 said...

makasi ILMU nya gan...

TheMatrix 007 said...

keren gan,, tapi kalo misalnya yg di klik "daftar isi blog" warna hitamnya kok tetap ada di home? biar supaya warna hitamnya pindah ke halaman yg kita klik gimana gan??? :)

sugi said...

Mas Ilmunya sangat berarti sekali bagi saya seorg newbie...Terima kasih, semoga dibalas kebaikannya...

Alexander Haryanto said...

terima kasih mas... sangat bermanfaat sekali

Bayu AW said...

gan, kalo tutor yang menu dropdown kayak di blog ini gimana?

@ridwan_firdaus said...
This comment has been removed by the author.
@ridwan_firdaus said...

Makacih bro atas info ny.... Sangat bermanfaat.......

BAHASA INGGRIS said...

mas, terima kasih. walapun ada kekurangan sana sini. mas, apa perlu tiap navigasi yang mas ajarkan harus kita menciptakan page statis dahulu. gimana mas, cara menghubunginya. trims berat mas.

The Special One said...

bermanfaat banget...
apalagi saya masih blogger pemula,, semoga blog saya bisa sekeren design blog mas ahmad..
thanks mas...

Kia Rebellina O-Shop said...

mas....,makasih ilmunnya...saya sudah buat labelya tapi bagaimna buat label dijadikan link...saat saya mau klik home cara oder kok gk keluar yang saya mau...

Meta said...

Makasih bayak yach, smoga aja menjadi ilmu yg bermanfaat bagi Mas Ahmad.

Meta said...

Mantaf... skali lagi makasih !

Hendra said...

trims...saya newbie. Saya seorang guru berusaha menumpahkan ide dan pemikiran tentang berbagai hal berkaitan dengan guru. tutorial seperti ini pernah saya coba dari yang lain, tapi gagal. Baru yang ini berhasil. Saya senang banget. sekali lagi trims.

Dhika Ardiansyah said...

Waranya bisa diganti?

Apandi Ridwan said...

thanks kawan :)

pesonamagelangutara said...

matur nuwun sanget

Eric Nanda said...

gan saya masih newbie gan saya kurang ngerti
tolong bikinin video nya aja gan :D

Wisata di Bali said...

mantap ni kayaknya....mau coba dulu...

Teknologi Informasi said...

makasi om.

HildaD'Bright said...

Assalamualaikum..wah terima kasih ya atas sharing ilmu blognya sangat bermanfaat. Oya Mas saya ijin ya link ke blogku http://jilbabzoyaku.blogspot.com/
Makasih

Aircatcher said...

Om, kalau misalkan tab nya ada "Home, Contact, About"

Dan misalkan saya sekarang ada di page Contact,
lalu tab Contact akan ter-hover hitam seperti tab Home di atas.

Ada caranya kah?

SobatObat said...

Gan, kok kode CSSnya ga berhasil ya? Jadi berantakan gitu skin atasnya? Salah dimana yak? Mohon pencerahan ..

MTeguhs said...

gan saya mau nanya nih. ganti warna hitam jadi warna putih gimana gan? hrp cepat di bls ya.
supaya bisa seperti template saya
http://teguhs-blog.blogspot.com

bloger anwar said...

menu yang gue cari ini sob
ditunggu kunjungannya
http://blo99-er.blogspot.com

gudang caraku blog said...

thanx info y gan..

Annisa Dwi Yani said...

mau tanya dong, bisa ga sih menu horizontal yg udah dibuat itu dihapus atau di hilangkan?
thanks before :)

yOu WahYou said...

maaf gan mau tanya,, di template saya kan ada slidernya... ketika saya klik menu nav yang ada submenunya ko tampilnya dibawah backgroun slider.. masalahanya dmna ya... thank atas bantuannya...

salis iribaram said...

maaf mas saya mau tanya, ini kan buat menu yang warna hitam, biasa tdk klau warnanya itu transparan?? maksudnya biar menunya nyatu sama backgraundnya gitu..
mohon pencerahannya.. :)

Ahmad Khoirul Azmi said...

@Wahyu: Tambahkan z-index:2 ke dalam css ul menu li.

@salis: wah tidak bisa tuh, karena background-nya berdasarkan gambar. Saya perlu membuat gambar lagi untuk mengubah warna latarnya. Mungkin di kesempatan depan akan saya rilis berbagai variasi warna dari menu yang sama dengan di atas.

El Hamdi said...

Terima Kasih seBESAR-BESARnya atas semua info dari Blog ini;-)

Muhammad Fikri said...

gan , kok pinggirnya ada warna merah? tolong pencerahannya

Cik Tieka said...

terima kasih tips nya .. its work on my blog ^__^

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap