32 Cara Membuat Menu Tab Navigator Horizontal

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Get update here 30 tab menu navigasi horizontal

Melanjutkan postingan sebelumnya sebagai jawaban pertanyaan seorang teman yang ingin mengetahui cara membuat menu tab navigator horizontal.

Sebenarnya pada banyak template baru, tab navigator horizontal ini sudah tersedia dan sobat dengan mudah bisa mendownloadnya dengan gratis dan tidak perlu susah membuatnya. Tapi bagi sobat yang tidak ingin untuk mengganti template baru lagi dan belum memiliki tab navigator horizontal pada headernya, berikut cara membuatnya:

1.Langkah Pertama

  • Loggin ke blogger

  • Pada dasbor klik tata letak

  • klik edit HTML kemudian cari kode ]]></b:skin>

  • kemudian letakkan kode berikut diatas ]]></b:skin>

menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
.menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;}
.menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

hasilnya seperti ini:

tab menu navigator horizontal

atau kode berikut:

.menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
.menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
.menuhorisontal li{display:inline; margin:0}
.menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px}
.menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

Untuk hasil seperti ini

tab menu navigator horizontal

keterangan untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera begitu pula dengan warna huruf dan backgroundnya. Untuk kode warna bisa lihat disini

  • Simpan template.

2. Langkah Ke Dua

Klik tata letak=> elemen halaman=> tambah gadget pada bagian atas header atau bagian bawahnya=> HTML/JavaScrip

Copy dan paste kode berikut warna merah berikut pada content:

 

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://amatullah83.blogspot.com">HOME</a>

<a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam" target="_blank">Agama</a>

<a href="http://amatullah83.blogspot.com/search/label/Teknologi" target="_blank">Tecnology</a>

<a href="http://amatullah83.blogspot.com/search/label/Kesehatan" target="_blank">Kesehatan</a>

<a href="http://amatullah83.blogspot.com/search/label/Islamic%20Animation" target="_blank">Islamic Animation</a>

<a href="http://amatullah83.blogspot.com/search/label/Glitter%20Text" target="_blank">Glitter Teks</a>

<a href="http://www.blogger.com/" target="_blank">Loggin Blogger</a>

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

Keterangan: untuk URL silahkan sobat ganti, begitu pula warna backgroundnya silahkan sesuaikan dengan selera. Bisa lihat kode warnanya disini

  • Simpan. simpan lagi... lihat blog anda!

Semoga berhasil dan bermanfaat!

*Contoh menu tab horizontal diatas header seperti diblog ini, sedang yang berada dibawah header seperti gambar dibawah ini.

blog uji coba


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

32 komentar :

  1. kak..ini memang artikel yg saya butuhkan,,thx yaa
    tpi pertanyaan sya,kalo mau isi data2 pada tiap tab navigatornya,,caranya gmn? misalnya,,pada tab AGAMA,,ingin saya isi dgn sajian2 rohani,,nah cara ngisi postingan spy masuk ke tab AGAMA itu gmn? mohon pencerahannya yaa,,kalo udah dibales,,tlg beritahu lwt Buku Tamu saya ya spy bisa sya lihat lagi balesannya di blog kk
    sYukron ya ukhti ;;)

    BalasHapus
  2. oh iya kak,,cara buat info bLog anna (show) gmn ya? hehe,,bis fitur2 blog kk menarik c,,saya jd pgn coba juga,,makasih ya kak,,btw kok kk gak ada fotonya sih? sya kan penasaran ;)

    BalasHapus
  3. @ suci: caranya copy kode warna merah diatas, url dan anchor teks aja yg diganti.

    @ nanti anaa posting lg tutorialnya ya de'!

    @ kenapa tak ada fotonya? kenali anaa disini ya de!

    BalasHapus
  4. Ditemplate saya memang dah ada yg gini, terimaksh infox!

    BalasHapus
  5. Iya disebegian template tdk ada, contohnya pada template minema dan template default blogger lainx.

    thanks komentarx!

    BalasHapus
  6. kak,,hehehe,,sya mau nanya lagi,,maklum haus ilmu,,hoho
    tutorial kk diatas kn cara membuat tab nya ya? nah kl blog saya itu kebetulan sudah ada tab navigatornya (dari templatenya)..tp yg sya bingung,bagaimna cara memasukkan postingan ke tiap2 tab navigator yg sdh sya miliki itu? thx ya kaak :)

    BalasHapus
  7. Oo kalau itu biasanya dibanyak template tertulis EDIT ME khn de? Nah pakai kata itu search ditemplate ade, klu dah nemu tgl masukin linkx, cara buatnya bisa contoh link2 diatas!

    BalasHapus
  8. kak,,hehe,,nanya lagiii,,gmn c kak cara buat address bar kk jd ada icon bunga nya? biasanya kan icon blogger ajaa

    BalasHapus
  9. lagi nyari2 buat menu scroll nih di mana ya ~x(

    BalasHapus
  10. mbak caranya buat menu tab navigator tapi yg 3dimensi/icon/gambar gimana?????yg kyak windows vista itu lho.....bisa gak mbak???? please.....kasih tau dong caranya????biasa masih awam.jadinya blm bisa apa2

    BalasHapus
  11. @ oen: menu scroll klik disini

    @ hikmawan: iya, insyaAllah hnya bth waktu.

    BalasHapus
  12. @ Kian: Terimakasih apresiasinya

    BalasHapus
  13. nice blog.. mohon komntar nya di "mafia pupuk"

    BalasHapus
  14. terimakasih apresiasinya

    BalasHapus
  15. admin...saya boleh tanya gak ? hehe
    kalo misalnya sudah berhasil buat tab menu nya itu...gimana cara mengelompokkannya, misalnya di tab "video" saya mau semua isinya video...atau kalo tam "music" semuanya tentang musik :)
    mohon bantuannya

    BalasHapus
  16. afwan...
    ane mau nanya...
    itu link yang
    <a href....
    itu apakah alamat linknya kita buat dulu??
    seperti "Agama"
    apa kita harus buat bolog baru dengan alamat http://aaaa.blogspot.com/search/label/agama"
    afwan kalo pertanyaan aneh..
    masi lum ngerti sih

    BalasHapus
  17. @ Sakura: Masukin aja link video dan anchor teksnya.

    @ Thin: Ga' harus buat blog, sub laman, or label baru ngikutin contoh diatas. Sesuaikn aja link dan anchor teksnya dgn konten yg ada diblog thin.

    Smg dpt membantu

    BalasHapus
  18. duhh, ane lum ngerti ukh...
    tu alamat yang Islamic Animation tu dari mana tuh???

    BalasHapus
  19. @ Thin: Yang islamic animation itu, ya dari blog ana. Thin buat link yang mengarah keblog Thin sendiri dong. Klu yang mudah thin pakai widget 30 tab navigasi horizontal aja. Silahkan search diblog ini dan klu komentar jgn lupa tuk tinggalkan link thin biar bisa saya kunjung balik, kali aja bisa dibantu lg?

    BalasHapus
  20. kak,ko saya udah nyoba error mulu,btw ada yang lbih gampang ga caranya hehe ^_~

    BalasHapus
  21. @ Visit Indonesia: Pesan errornya apa? Coba pahami pesan trsbt, klu tdk ngerti silahkan tulis disini mnhkn bs sy bantu.

    Yg mudahnya silahkan lihat postingan sy 30 tab navigasi horizontal disini

    BalasHapus
  22. Maksh mbak tutornya. Style spt ini yg sy cr.. Ijin copas di blog sy, mbak. disini

    BalasHapus
  23. Mksh mbak tutornya. Style spt ini yg sy cari.. Ijin copas juga disini.. Oia skalian tanya komentar di blogger bs ga ya, dibuat navigasi dgn pnambahan "komentar sebelumnya" atau "komentar selanjutnya" atau penomeran. Kan itu bs membantu klo blog kita punya komentar bnyak.. Klo ada gmn caranya.? Klo ga bisa gmn alternatifnya.? Makasih.

    BalasHapus
  24. makasih mbak anaa, sekarang ane lagi butuh buat horizontal nih buat nglengkapi template, pas postingannya ^_^

    BalasHapus
  25. tnk kaka informasinya
    tapi bagaimana caranya dalam satu menu ..atau misalnya dalam menu islamic,postingannya banyak gak cuman 1 saja ?

    BalasHapus
  26. kalo nambahin sub menu yang ke bawah gimana?? misal kalo di menu Agama tuh ana masukin lebih dari satu label dan akan muncul label tersebut dengan nunjukin alias tanpa di klik. syukron
    (nyoba ngblog n_n)

    BalasHapus
  27. ass.ww. sudah dicoba, tapi lom berhasil, menu tab bisa horizon, tapi pas di pasang nama lamannya ga ketemu yang dimaksud, apa search labelnya salah???

    BalasHapus
  28. Tn_Q bro...
    Care banget pd newbi
    blogx mantep..tep..tep...!!!

    BalasHapus
  29. Terimakasih Infonya Jgn Lupa Kunjungi Blog saya >> http://trickblog5.blogspot.com/

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!