97 Cara Membuat Menu Tab View

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

 

Cara membuat Tab ViewBarusan posting cara memasang widget recent post atau postingan terbaru, komentar pertama yang diterima dari sahabat blogger pada postingan itu disertai lagi dengan pertanyaan cara membuat tabel, walau blm begitu ngerti jelas pertanyaannya mengarah ketabel yang mana? Mungkin yang ditanya, bagaimana cara membuat menu tab view atau justru tab view slide?
Baiklah anaa coba posting satu persatu, yang pertama bagaimana cara membuat menu tab view seperti screen shoot disamping:


  • Seperti biasa dalam keadaan loggin, klik Template=> edit HTML
  • masukkan kode berikut pada bagian header, antara <head> dan </head>, kalau bingung letakkan saja dibawah kode <head>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/tabview.js' type="text/javascript"/>
  • kemudian letakkan kode berikut diatas kode ]]></b:skin>
/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
  • Janganlupa simpan template. kemudian klik pada elemen halaman=> tambah gadget=> HTML/JavaSript=> copi dan paste code berikut dalam content:
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1 
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2009/11/cara-membuat-menu-tab-view.html" target="_blank" title="Tabview Widget">Get This Widget</a></div>
Silahkan anda ganti dan edit kode diatas, judul tab dan untuk warna bisa lihat kodenya disini.
  • Save, kemudian save lagi. Silahkan lihat hasilnya diblog anda!
Demikian tutorial cara membuat menu tab view sederhana. Semoga bermanfaat
Ingin membuat yang lebih mudah dan menarik, lihat tutorial membuat tabber tab disini.
Cara membuat tabber tab


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

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

97 komentar :

  1. jadi lebih praktis yah n simple bisa buat isi apa aja nih

    BalasHapus
  2. Iya bnr, isi apa aja kode JavaScrip tntunya! Thanks kunjungan dan komentarx!

    BalasHapus
  3. salam sahabat
    wah bagus saya juga lagi praktek loh good hasilnya,thnxs n good luck ya

    BalasHapus
  4. Wassalam ukhty dhana, alhamdulillah, barakallahu fiik

    BalasHapus
  5. wah keren tutorialnya. saya masih blank sama javascript, hehe...

    BalasHapus
  6. @ hielmy: keren? tutorial sobat jg mantap, rendah hatix patut dibudayakn! Thanks apresiasinya!

    BalasHapus
  7. wah postingnya langsung di buatin
    maksih ya...

    BalasHapus
  8. @ NOVA: iya sama2, smg mdh praktekinx

    BalasHapus
  9. yang ini ana ambil ya...moga bisa dipasang di blog ana...makasih

    BalasHapus
  10. oh ya, kalau mau buat tab menu di bagian atas header bisa gak. soalnya cuma blog2 tertentu yang ada menu nya di bagian atas, misalnya kayak blog ini ada menu agama islam, teknologi, glitter text, kesehatan dsn. blog saya bisa kah di buat spt itu ? mohon petunjuknya.. silahkan di liat blog saya !

    BalasHapus
  11. anaa dah buat postingannya silahkan diklik disini dan lanjut disini semoga bisa membantu!

    BalasHapus
  12. kak,tab view itu sama seperti label or gk?

    BalasHapus
  13. @ label apa nie mksdx de?

    BalasHapus
  14. terima kasih, atas tutorialnya :d

    BalasHapus
  15. sama2 terimakasih jg komentarx!

    BalasHapus
  16. nice blog friend..thanks for shared

    BalasHapus
  17. trus kode yg warna itu ditaruh dmn???tq

    BalasHapus
  18. seperti ini bentuk kode warnax #CCCCCC, ganti sesuai selera warna border, teks dll. Kodex dalam template, jd sblm simpan template ngeditx!

    BalasHapus
  19. Disini letakkan kode untuk tab 1 anda ,nah tu kode yg mana???liat dunk blog q lagi,,kog berantakan gitu..

    BalasHapus
  20. kode ukhty... yg HTML/JavaScript, mau links, banner, buku tamu de el el

    BalasHapus
  21. Maaf mas, tolong dong minta sekali kode java script utk recent post, recent commen,s ama top post (hehehe,,ga tau malu banget y. Dikasih usu minta hati, hehe>
    Maklum ya, newbie banget nih.
    Kalo udah direspon tlng konfirm ya mas..
    Mksh banyaaaakkk

    BalasHapus
  22. lho kok disapa mas? kirain klu liat blog anaa dah ngerti deh ini blog milik wanita pa pria?

    anaa dah posting tu, tgl search aja di kolom search (sidebar kanan ats) atau di arsip tutorial dlm tab view

    BalasHapus
  23. Oh,wanita ya :-) maaf deh. Kan biasanya yg punya blog tutorial itu cowo. Sy lupa, sekrang kan lagi zamannya penguatan gender, hehehehe..
    Trims responnya mba...

    BalasHapus
  24. isi blog ini khn macem2, trus ini khn hanya berbagi ilmu jg, diposting biar ilmux lekat. g' ada sangkut pautnya ma gender.

    BalasHapus
  25. oh ya, di blog saya kalau masang 2 tab view yang kok tidak berfungsi. Itu kira2 karena apa? Ada tipsnya nggak biar semuanya bisa

    BalasHapus
  26. @ Andi: insyaAllah ada waktu anaa posting caranya. Tapi kalau butuh sekarang jawaban singkatnya anaa tuliskan dikolom komentar diblog sobat.

    BalasHapus
  27. info menarik.....patut di coba...

    BalasHapus
  28. mksih kak ...
    udah berhasil

    BalasHapus
  29. @ fuda_9: Alhamdulillah. Terimakasih apresiasinya.

    BalasHapus
  30. MAw tanya untuk mengganti warna tulisan daftar isi yang di tab dimana ya letaknya...makasih...

    BalasHapus
  31. bro bagaimana caranya membuat dua buah widget dua buah tabview,saya coba di saya malah ga bisa,yang satu bisa yang satu error

    BalasHapus
  32. @ Tyo: kalau tabnya diletakkan disidebar mk tuk mengganti tulisan menux jika berupa kumpulan link, cari kode sidebar li pada template sobat. klu dah dpt silahkan ganti kodewarnanya.

    @ No-false: baca syaratnya di postingan manfaat bertukar link

    @ Anonim: InsyaAllah ada masa saya posting triknya.

    BalasHapus
  33. duh kog ane g bisa ya????
    "Disini letakkan kode untuk menu tab 1 "
    di ganti apa y akhi???

    BalasHapus
  34. Diganti dengan kode HTML, apakah daftar link, widget dll.

    Smg dapat membantu.

    BalasHapus
  35. udah banyak ya kayaknya yg memposting kayak gini, yg jadi pertanyaan, sapa sih yg pertama sekali memposting kayak gini.

    BalasHapus
  36. @ Bang salom: Mmg benar, tntu yg pertama kali adalah pemilik source, kadang sy hnya modifikasi lg CSSx dgn menambah ronded courners atau merubah warna, angka pading dan marginx.

    Silahkan kunjungi disini untuk melihat pemilik source ragam tab.

    Kadang sy buat tutorial disini jg hasil dari melihat apa yg ada pd koleksi template yg sy download.

    Smg prasangka anda tdk seperti seorg komentator di postingan sy glosy menu. Hanya krn sdh bnyk yg posting dan sy dikenal sbg seorgpemula. Bukankah seorg yg skrg dikenal master jg berawal sbg pemula?

    BalasHapus
  37. wah sob, mau tanya nih. kalo mau make tab view jumlahnya 2 dalam satu blog tuh gmn ya caranya? apa kode css-nya double juga? lha terus dirimu bikin kode script sendiri tuh gmn caranya?

    BalasHapus
  38. @ agusta27: klu kode dan script yang sama double pasti yang bekerja ttp satu, ya khn? coba aja sendiri. Nah untuk membuat dua tab view atau lebih perlu ngedit script dan CSS serta HTMLx dari tab view semula. Klu g' bisa pakai script dan kode lainx yg berbeda.

    Saya blm tau buat script, bisanya ngedit aja. InsyaAllah kdpn akn belajar lbh fokus tuk ini. Jika ingin belajar khn sekarang bnyk tu tutorialnya dari web-web designer, bahkan ada kursus online atau download aja EBookx.

    BalasHapus
  39. Nah yang ini mba susah, saya kurang mudeng, ada yang lebih gampang.

    BalasHapus
  40. salam sejahtera..
    saya sama sekali tidak tahu kalimat dari "Disini letakkan kode untuk menu tab 1". isi kodenya seperti apa? bisa gak kasih contoh? makasih ya,,, ini baru mau buat blog...

    BalasHapus
  41. Mbak, saya mau tanya lagi, bagaimana caranya memasang recent post, recent comment, label ke dalam tab menu view. terima kasih. jazakumullah

    BalasHapus
  42. wah, ko ak g bisa ya.....! malah jd error! trus klo mau di kasih judul seperti Trik Blog, Widgets dll gmana caranya? Thnk's infonya.

    BalasHapus
  43. kalo buat Wordpress gimana mas??? newbiee nih.
    balas via komen blog-ku kalo gak keberatan.
    trims

    BalasHapus
  44. Thanks infonya, mo coba yang ini deh, pke tutor yang laen dah 2 kali gagal, cpa tw pke ne ntar bisa... Ijin sedot boz...

    BalasHapus
  45. Thanks infonya sob, langsungcoba ne.

    by http://u-sup.blogspot.com

    BalasHapus
  46. Saya bingung antara titel menu dan isi menu tersebut,

    Disini letakkan kode untuk menu tab 1
    Disini letakkan kode untuk menu tab 2

    itu untuk titel atau isi menu???
    totlong beri cobtoh dimana titelnya dan dimana isi menunya. plis via email
    usupnew[at]gmail.com
    jawabannya saya tunggu. thanks

    atau update pada bagian wigdetnya dengan beberapa contoh biar jelas nanti saya kesini lagi.

    BalasHapus
  47. @ Usup: Titel menu judul. Isi menu atau kalimat yg sy tuliskan disini letakkan kode untuk menu tab 1 dst, silahkan isi dgn ragam widget. Seperti script recent post, recent comment atau daftar link teman atau artikel.

    Sy sengaja tidak ngisi dgn contoh daftar link sy, sebenarnya biar tdk sulit bg blogger untuk mengganti atau mengedit link yg sy cantumkan.

    Tp jika bg sobat lbh mudah dgn contoh. Ya udh InsyaAllah sy kirimkn contohx.

    Terimakasih apresiasinya.

    BalasHapus
  48. sy ucpkn trmaksh ats tanggapanny, ok sy tnggu ya... smga skses di tanah suci. amin.
    salam dr blogger temanggung

    BalasHapus
  49. bismillaah

    setelah ana coba ber ulang2,pada templet yang ber beda ternyata masih belum bisa juga,ana mohon di kasih tips yang lebih detail dan mudah di pahami oleh orang awam semisal kami,ana ingin belajar dari ukhti,atas ke ikhlasannya ana ucapkan jazaakillaah khoiron katsiiran

    BalasHapus
  50. @ Tewesell.com: Sy jg coba ditemplate berbeda tp alhamdulillah sll berhasil.

    Tuliskan apa masalahnya atau pesan error yg anda temui saat menerapkan tutorial ini, biar sy bisa memberikan solusi yg tepat!

    Makasih

    BalasHapus
  51. bismillaah

    yang muncul hanya kotak berbingkai dengan warna hitam,ada tulisan Disini letakkan kode untuk menu tab 1 dan Disini letakkan kode untuk menu tab 2 ,jazaakillaah khoiron..

    BalasHapus
  52. @ Tewesell.com: Klu screnshootx sudah seperti image diatas berarti tgl memasukkan script, HTML dllx ke tempat yg bertuliskan disini lettakkan kode 1...dst.

    Gpp mngkn klu anda tinggalkan link yg menuju blog tempat anda mempraktekkan tutorial ini, biar sy bisa lihat seperti apa hasil pekerjaan anda?!

    BalasHapus
  53. bismillaah

    ana coba lagi terekhir disini
    jazaakillaah khoiron

    BalasHapus
  54. @ Tewesell: Maaf klu tampilannya seperti itu berarti ada kesalahan. Coba ikuti kembali tutorial diatas dengan lebih teliti dan sdkt kesabaran! Smg berhasil.

    Klu masih bingung jg nnt sy kasih cara buat tab view tanpa edit lagi HTML, langsung pasang sbg widget.

    Wa Jazaakumullahu khoiran.

    BalasHapus
  55. bismillah

    udah ana coba lagi tapi hasilnya sama aja,klo gak keberatan tolong ana di kirim tab view yang langsung pasang aja,skalian ama tutorialnya.ini alamt email ana ;tewesell70@yahoo.co.id ato imambukhori70@yahoo.co.id

    jazakillaah khoiron...

    BalasHapus
  56. Makasih gan atas Tutornya ini sangat berguna buat Bloger pemula seperti dava ini,..

    BalasHapus
  57. aku pingin...
    tp pingin yang menggunakan j query..
    gmn ya??

    BalasHapus
    Balasan
    1. Untuk tabber tab menggunakan JQuery ada tutorialnya disni dan disini Semoga membantu

      Hapus
  58. terima kasih tipsnya, tapi untu widget saya belum bisa,,,

    BalasHapus
  59. Ass WW. saya udah coba, tapi waktu diklik menunya kok ga jalan ya?? apa search labelnya ada yang salah atau masih ada trik lain??? jika tidak keberatan repply ke msuryakencana7@gmail.com,syukron

    BalasHapus
  60. ternyata aq maasih bingung mbak,.... ahhhhhh, ternyata ane g faham betul masalah html, hyahhh...

    BalasHapus
  61. Mudah"an yang saya praktekkan berhasill :)
    Ini masih dalam tahap belajar soalnya hehe

    BalasHapus
  62. kalau untuk wp, sama aja ndak ya prosesnya?

    BalasHapus
  63. ass.wr.wb

    mbak tanya nih kok pas di kliok di menu muncul tulisan "halaman anda tidak tersedia" klo mau masukkan artikel kita gmana ya
    maklum baru belajar blog..hehehehehe thx

    BalasHapus
  64. Nice info....

    bimosuper.blogspot.com

    BalasHapus
  65. Mantap kawan...Follow Back Ya sob....

    BalasHapus
  66. infonya menarik sekali..izin share ya mbak untuk melengkapi koleksi tutorial saya..terima kasih....

    BalasHapus
    Balasan
    1. Iya silahkan! Happy blogging. Thanks kunjungannya!

      Hapus
  67. thankz infox,, tpi sya mau nanya.. klo udah buat tab menu nya.. trus kita mau nulis postingan dan mau di masukkin ke salah satu judul tab nya,, cranya pie???
    makasih seblumx buat jawbanx..

    BalasHapus
    Balasan
    1. Jika postingan blog yang ingin dimasukkan maka anda harus membuat kode URL link post dan judul post sebagai anchor teksx. Sudah tahu cara membbuat link dan anchor teks? Klu belum lihat contohnya di postingan cara membuat menu scrolling disini

      Hapus
  68. MasyaAllah keren tampilan widgetx dan tutorialnyapun berbobot.

    BalasHapus
    Balasan
    1. Alhamdulillah, terimakasih ats kunjungan dan apresiasinya.

      Hapus
  69. yang punya website keren nih cowok atau cewek? kalo cewek gue kasih 2 jempol deh.... dan juga kalo ketemu di dunia nyata gua ajak kenalan.. trus tanya2 soal bloging serius!!( itu juga kalo ceweknya mau kenalan hehehee...)

    my blog gan, very simple... than youRahmatdi99 blog's

    BalasHapus
    Balasan
    1. Terimakasih, dua jempol juga untuk apresiasi anda.

      Hapus
  70. cantik juga ni tampilannya..ijin nyoba ya sob dan trima kasih dah berbagi

    BalasHapus
  71. terimah kasih banyak atas info yang telah anda berikan. Artikel ini sangat bermanfaat untuk blogger pemula kaya saya.. hihihi :D
    sekarang tampilan blog aku sudah menarik. :)

    BalasHapus
  72. mbak bagaimana jika kita ingin merubah posisi menu tab ada disebelah kana atau kiri.. thanks infonya.. mohon dijawabnya.. (p)

    BalasHapus
    Balasan
    1. Silahkan diganti kode CSS letak tab menu utama diatas--> Float:Left; untuk posisi tab disebelah kiri atau right untuk posisi tab disebelah kanan.

      Hapus
  73. saya lagi nyari-nyari ini mba, pernah praktekin sih tapi ya gagal maning-gagal maning :d kalo ada sih tab view yang ga pake edit html, langsung pake tanpa masukin kode-kodenya..maaf yah jangan bilang males :d

    BalasHapus
    Balasan
    1. Coba tabber tab yang ada dibawah posting ini atau yang pakai JQuery search aja tutorialnya diblog ini. Semoga membantu.

      Hapus
  74. Mohon dibantu kakak krn saya br bljr ngeblog..
    maksudnya;
    Disini letakkan kode untuk menu tab 1 <--- kode apa yach kakak ?? letaknya dimana ??
    Thx

    BalasHapus
    Balasan
    1. Kode HTML de' bisa adik isi dengan widget atau link. Contohnya seperti screenshot diatas.

      Hapus
  75. script nya saya simpan dili.kapan2 di coba. cheer

    BalasHapus
  76. nice info :) (h)

    http://nandarious.blogspot.com

    BalasHapus
  77. assalam...
    mba amatullah, bisa buatin widget tab view yang mirip detik?
    wassalm

    BalasHapus
  78. ]]>: gan saya find kode tersebut ga ketemu, langsung waktu edit html nya kan ? tolong dijawab. saya selalu macet pada langkah ini

    BalasHapus
  79. izin kan saye untuk copy ya :)

    BalasHapus
  80. Asalamu'alaikum ya ukhty, wah Anda benar benar maestro blogger, saya memfavoritkan blog Anda. Template blog saya 3 kolom dengan sidebar kiri kanan yang sempit, apa bisa dipasang tab view kayak gini, maklum newbie banget nie. Please kunbal ya sekalian kasih saran buat blog ana http://matapelajaanski.blogspot.com

    BalasHapus
  81. Ini tabnya responsive gak ya?

    BalasHapus
  82. Berarti bisa di bikin 3 kolom dong gan..?

    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!