69 30 Tab Menu Navigation Horizontal Untuk Blogger

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

Sebelumnya saya pernah posting cara membuat menu tab navigation horizontal. Mungkin ada diantara teman-teman blogger yang menemukan kesulitan dalam meletakkan kode CSS pada tahapan pengeditan template, untuk itu pada postingan kali ini saya mencoba memberikan solusi ringan berupa sajian 30 tab menu horizontal instant yang siap pakai hanya dengan menambahkan gadget HTML/JavaScript dan meletakkan kode tab pada konten, sekaligus menekankan akan urgennya fungsi tab navigation pada sebuah template.

Langkah-langkah membuat tab menu navigation horizontal

1. Dalam keadaan sig in pada account blogger sobat, pada dasbor => klik Tata Letak=> klik Elemen Halaman

2. Klik Tambah Gadget pada kolom elemen halaman dibawah header atau diatas header

2. Pilih HTML/JavaScript

3. Copy semuae kode tab yang terdapat dalam teks area dibawah tab navigator horizontal pilihan sobat dan paste pada kolom konten

Untuk mengganti link, edit pada bagian HTML semua kode seperti berikut:

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

ganti kode (#) dengan halaman link sobat dan ganti Link1, Link2, Link3 dan seterusnya dengan titel halaman jika ingin menambahkan atau menghapus sebuah tab, sobat tinggal menambahkan atau menghapus bagian baris kode berikut:

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

4. Terakhir jangan lupa simpan dan simpan. Lihat hasilnya pada blog.

Berikut kode 30 tab menu navigasi horizontal

 

MBT Navigation Menu #1

Black-Orange

MBT Navigation Menu #2

Purple-White-Navigation

MBT Navigation Menu #3

Boxed 1

MBT Navigation Menu #4

 LIGHT-GREY

MBT Navigation Menu #5

Bulleted-top-Navigation

Tabs Menu #6

Tab Menu I

Tabs Menu #7

 Tab Menu G

Tabs Menu #8

 Tab Menu F

Tabs Menu #9

 ZDnet Emulation

Tabs Menu #10

 Tab Menu E

Tabs Menu #11

 Tab Menu D

Tabs Menu #12

Tab Menu 12

Tabs Menu #13

 Tab Menu 11

Tabs Menu #14

Tab Menu 10

Tabs Menu #15

 Tab Menu 9

Tabs Menu #16

 Tab Menu 6

Tabs Menu #17

 Tab Menu 8

Tabs Menu #18

Tab Menu 7

Tabs Menu #19

Tab Menu K

Tabs Menu #20

Tab Menu 4

Tabs Menu #21

 Tab Menu 3

Tabs Menu #22

 Tab Menu 2

Tabs Menu #23 Square

Tabs Menu #24

Horizontal Buttons

Tabs Menu #25

Tab Menu H

Tabs Menu #26

 Tab Menu 1

Tabs Menu #27

 Tab Menu A

Tabs Menu #28

Tab Menu 5

Tabs Menu #29

 Tab Menu B

Tabs Menu #30

Tab Menu J

Thanks to My Blogger Trick


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

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

69 komentar :

  1. warnanya cantik2 mba...
    sip deh...

    BalasHapus
  2. lebih mudah yg ini kayaknya

    BalasHapus
  3. benar ukh, smg bermanfaat. thanks apresiainya

    BalasHapus
  4. wiw keren, bisa di buatin dropdown juga gk ?

    salam blogger:)

    BalasHapus
  5. @ Lokal Download: InsyaAllah pada postingan berikutnya.

    BalasHapus
  6. Woww..keren sekali ukh...makin kreatif aja nih..izin save ya!

    BalasHapus
  7. @ insanitis37: Silahkan... Terimakasih apresiasinya.

    BalasHapus
  8. langsung bungkus satu sob, yang lainnya cuma ganti padding, margin, background satu lagi color, hehe...

    nice poisting sob banyak pilihan

    BalasHapus
  9. Makin dimengerti yang ini, thanks udah berbagi ...
    makin betah aza nongkrongin blognnya semalaman, sambil mempraktekan semua tutorialnya

    BalasHapus
  10. @ blog buat bloggers: selamat berkreatifitas

    @ sepwawan: sukses terus tuk anda

    @ all: terimakasih apresiasinya

    BalasHapus
  11. salam sahabat sis Amatullah..
    subhanAllah tutorial bagus ...izin saya praktekkan di rehat ya...oh iya Ada award buat sis Amatullah semoga berkenan di ambil yc..thnxs n good luck

    BalasHapus
  12. @ Dhana/戴安娜: Wassalam ukh. InsyaAllah anaa ambil

    BalasHapus
  13. Assalamu'alaikum..
    Ummi..syukran..jazakillah, Blognya telah menjadi inspirasi bagi blog kami...
    semoga segala kebaikannya dalam berbagi ilmu..di balas oleh sang maha pemberi ilmu. Amiin.
    Wassalamu'alaikum..

    BalasHapus
  14. makasih sdh bagi2 ilmunya...

    BalasHapus
  15. kebetulan nih lagi butuh tab pas postingannya tab, sipp dah

    BalasHapus
  16. titiplink: http://www.google.co.id/firefox?client=firefox-a&rls=org.mozilla:id:official

    BalasHapus
  17. @ all: terimakasih apresiasinya

    BalasHapus
  18. kakaaak, aQ dtg sejenak krn minggu dpn sya msh hrs menghadapi 2 UAS lgi.. fhhhf

    oh ya,,saya jd gak enak kak mw pke template kk krn template yg saya mw unduh adalah template yg kini kk pake.. :p

    BalasHapus
  19. @ suci: silahkan de' gpp kok. anaa masih mungkin ganti template lagi. ini khn cuma jadi model pertama aja. kirain ade mau yg kuning, biru tau pink?

    BalasHapus
  20. aku susah nyari postingan yang isinya ini di internet..tp untunglah ada anda ;;D

    hmm tp kan setelah link itu dipasang akan mengarah ke halaman baru, nah cara ngisi halaman baru tuh gimana? kok saya klik malah muncul halaman tidak ditemukan..
    maklum saya masih newbi..

    makasih banyak ;))

    BalasHapus
  21. yth Admin.
    terima kasih banyak tipsnya,mudah-mudahan amal baik anda mendapatkan berkah oleh Tuhan Yang Maha Esa.

    mohon ijin saya Copas scriptnya tentang membuat menu horisontal ini. maklum saya baru belajar biin Blog..
    terima kasih sekali lagi..salam sukses selalu..

    ( TTD YOTO DI RENGAT BARAT-INHU- RIAU )

    BalasHapus
  22. terima kasih informasinya mbak :D
    banyak macemnya ya :D
    tinggal pilih

    BalasHapus
  23. mantab...lengkap dan berguna banget....makasih

    BalasHapus
  24. blog yang manis.... makasih infonya mas

    BalasHapus
  25. @ Peluangbisnis: Isi linknya dengan alamat yang mengarah keblog sobat.

    @ Yoto: Silahkan

    @ mas doyok: terimakasih apresiasinya

    @ Curhat dan laston: terimakasih apresiasinya

    BalasHapus
  26. aQ mw yg Kuning,,emangnya ada kak?

    BalasHapus
  27. Maksih sekali nih tipsnya sobat.. kebetulan lagi butuh. oh ya dah saya follow.. followback ya n lam kenal

    BalasHapus
  28. @ suci: apanya yang kuning de'? tabnya atau templatenya?

    @ Link tea: Terimakasih apresiasinya

    BalasHapus
  29. @ sucy: iya ntr dah insyaAllah yang kuningnya anaa buatin. Oke! Intinya sabar nnggu aja!

    BalasHapus
  30. iya kak,,aQ akan seLaLu sabar kak

    kaLo boLeh request ya kak (mudah-mudahan kk berkenan mengabulkan)

    saya maunya:
    1. templatenya dominasi kuning
    2. headernya menyeluruh spt punya kk (klo header blog sya kan cuma separuh kolom)
    3. dibawah header ada tab slide
    4. 3 kolom
    5. pake icon "love" seperti punya kakak,,kalo ada yg tweety,saya akan sangat lebih bersyukur..

    maaf ya kak banyak maunya..tapi saya mau kok kak nunggu sampe sebulan kedepan atau terserah kakak

    syukron ya Ukhti yang cantik dan kaya hati serta ilmu nyaa..

    BalasHapus
  31. @ Suci: he2 requestnya. Oke hanya anaa minta ade yg nyari ya tuk icon tweetynya. Karena anaa g' punya.

    BalasHapus
  32. mbaaaa...udah buat link... itu kan bisa di ganti2 tp pas d klik gd ada apa2... gmn caranya biar kita klik ada laman baru lagi ? tq

    BalasHapus
  33. @ gadis: ganti # dengan link gadis dan link n dengan anchor teks

    BalasHapus
  34. mksh info nya, benar2 manfaat!

    BalasHapus
  35. cihuy keren keren banget deh....
    sepertinya yang pink cocok ma blogku...

    BalasHapus
  36. trims.. kelihatannya lebih simple. mksh atas info-nya

    BalasHapus
  37. Nice info, thanks for share...

    BalasHapus
  38. ,GOD ,bnget,,bnyak variasi,,,,meskipun trpksa hrus copas ,berkali-kali,,,,,,,,,mohon izin copas ,en, coba d,blog saya,,,,,,,,,,,,,,,,,blog sy msih amburadul,,,,klu dah jd,,,sy psti shering,,k,sini,,,,thank,s`

    BalasHapus
  39. Salam.
    Saya baru belajar..
    So, masih sangat butuh panduan.

    Lanjutan dari artikel di atas:
    Bagaimana cara membuat link baru? apa sama seperti membuat posting baru? coz di blogspot tidak ada fasilitas "add page" seperti di wordpress.

    Kalau itu caranya, nanti judul artikel akan terlihat juga di "recent document"?

    Kalau kita ingin agar isi dari link baru itu adalah daftar artikel, bagaimana caranya?

    Terimakasih utk jawabannya..

    jzk..

    BalasHapus
  40. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  41. Kalau mengatur lebarnya agar penuh gimana ya??
    Tabnya kan baru sedikit, jadi hasilnya cuma setengah dari lebar blog, so kelihatannya kurang enak..

    BalasHapus
  42. makasi mba'
    ane coba dulu yah...
    ty... :D

    BalasHapus
  43. oy mo nax ,, ini bisa ditambahin sub menu gk??
    klo bisa carax gmn??
    makasi... :D

    BalasHapus
  44. kode tab menu yg ada 30 jenis itu ditaruh mana ya ?

    BalasHapus
  45. waduh...waduh...waduuuuh ilmu ini sangat ok, aku coba ya ? doain donk, masalahnya masih pemula... maskasih dan aku sudah pastekan data ini di koputerku, gratis lho ya...

    BalasHapus
  46. Mksie ats infox...

    jngn lpa follow

    BalasHapus
  47. permisi.. assalamualaikum.. saya sangat beruntung bisa menemukan blog ini...
    semua tutorialnya sungguh langka.. dan jarang ditemukan di blog blog laen..

    BalasHapus
  48. San9aT mMbanTu dri Qhu sekali ! ! !
    thx's

    BalasHapus
  49. mbak...aq mw tanya dong...klo kta mw nambahin sub menunya gimana ya...?? aq pak tab menu 8 nih...ada tutorialnya ga..??

    BalasHapus
  50. assalam..subhanallah..tip triknya bagus-bagus..ingin belajar banyak ini ukh..kunjungi blog saya..afwan lagi belajar,mhn masukan kalo berkenan..wassalm..

    BalasHapus
  51. Mantapp !!
    I Like Your Blog !!!
    Sukses eaa,, n' jgn lpa kunjungan balik lhoo
    ^^

    BalasHapus
  52. Thx bro . . . ! Izin copy ya untuk buat template sendiri. Postingan yang sangat bermanfaat buat saya yang baru belajar ngeblog. GBU

    BalasHapus
  53. Sungguh bermanfaat Kaka untuk saya khususnya yang sangat amat pemula di dunia blog
    Makasih banyak atas ilmunya,,,,semoga makin di tambah lagi ilmunya sama yang memberi Ilmu,yaitu Tuhan,,,aminn

    BalasHapus
  54. Asslkm Sobat, selamat yaa.... asyik juga msuk ke Blog ini. Masya Alloh, sumpah aku kagum, gk ada capeknya buat cari info.

    Ok, Mohon doanya, agar kami bisa ke Madinah lagi.
    Syukur2 bisa ketemu dan saling berbagi.

    Ada kenangan yang tak akan terlupa, karena kami pernah singgah di Kota Rasul, semoga barokahnya sampai dsini.

    Maaf, aku langsung terharu kalau harus bicara mengenai Madinah al Munawaroh.

    "Yaa Rabb, kami rindu nabawi, rindu Rasull Mu...."

    Terima kasih. Wassalam.

    BalasHapus
  55. mantap bro,,thaks banget...sekalian nanya kalau mau nambahin sub menunya gimana ya gan??? thaks banget

    BalasHapus
  56. tutorial mantap, ijin dipraktekkan ya Gan, tks

    ditunggu kunjungan baliknya Gan http://filmtitanic.blogdetik.com/

    BalasHapus
  57. ane bookmark dulu sob .barangkali nanti saya butuh

    BalasHapus
  58. ukhti...
    klo ana minta saran ehhe alias minta tolong. Tutorial membuat menu horizontal dengan image / gambar yang berbeda bisa?
    misalenya home, aboutme, itu gambarnya berbeda. jadi kayak widget social spti. bisa ukht? ana pengen ada yng beda ..
    maksh ku tunggu tutorialnya smoga bisa..

    BalasHapus
    Balasan
    1. Iya ukh insyaAllah nanti anaa buatin request tutorial ukhty, sabar nunggu ya!

      Hapus
  59. Bisa juga menggunakan fitur laman bawaan blogspot.

    BalasHapus
  60. wah sangat bermanfaat buat nambah ilmu tentang blogger..
    oh ya mba.. saya mau nanya cara untuk menambah page atau halaman baru berdasarkan kategori pada label blogger,, klo ada tolong diposting donk,, thanks

    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!