Bagaimana Cara Membuat Tab View Pada Blog ?

Membuat menu tab view di blog itu sangat diperlukan bagi blogger yang ingin membuat desain blognya terlihat lebih profesional dan hemat ruang.


Apakah kita pernah mengunjungi sebuah blog dan melihat adanya menu tab view yang di pasang di sidebarnya? Atau apakah kita sendiri belum tahu apakah menu tab view yang dimaksud beserta kegunaannya?

Menu tab view adalah sebuah pernak-pernik blog yang menampilkan beberapa widget yang berbeda kemudian digabungkan penempatannya menjadi satu bagian dalam bentuk tab-tab yang terpisah. Fungsi dari menu tab view ini bisa kita gunakan untuk menghemat ruang di bagian sidebar maupun footer dan membuat kesan tampilan blog kita terlihat lebih profesional.

Seperti yang kita tahu jika kemudahan akses pembaca dalam menjelajahi blog kita ini sangat diperlukan. Selain menguntungkan bagi kita karena blog kita dapat dieksplorasi dengan baik, blog yang mudah diakses juga menciptakan adanya efisiensi dalam menempatkan widget blog agar terbaca oleh pembacanya. Salah satu fungsi lain dari adanya menu tab view ini adalah kemudahan bagi pembaca dalam mengakses widget-widget dalam blog kita.

Cara yang digunakan untuk membuat menu tab view ini juga relatif mudah. Kita hanya perlu sedikit memodifikasi HTML template blog dengan penambahan kode HTML dan javascript baru.

Adapun cara untuk membuat menu tab view di blog milik kita adalah sebagai berikut:

Langkah pertama.

Masuk ke akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari kode berikut.

]]></b:skin>

Letakan kode berikut di atasnya.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background menu aktif*/
color: #FFFFFF;
}

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:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*background kotak utama*/
}

div.TabView div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
padding: 3px 5px;
font-size: 12px; /*besar hurup kotak utama*/
}

Cari kode berikut.

]]></b:skin>

Letakan javascript berikut di bawahnya.

<script src="http://panduanbelajarblog.googlecode.com/files/tabview.js" type="text/javascript"/>

Klik simpan dan selesai.

Keterangan:

  1. Tekan tombol Ctrl+F pada keyboard untuk mempermudah proses pencarian kode HTML yang diinginkan pada HTML blog kita.
  2. Unduh dan simpan template blog kita terlebih dahulu sebagai langkah antisipasi jika kita mengalami kegagalan saat editing berlangsung.


Langkah kedua.

Klik menu rancangan.

Klik add gadget.

Pilih HTML/JavaScript.

Masukan kode berikut.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript"> tabview_initialize ('TabView'); </script>

Klik simpan dan selesai.

Penggunaan menu tab view ini sangat bermanfaat terutama bagi kita yang ingin menghemat ruang untuk menampilkan banyak widget dalam blog kita. Desain yang menarik juga membuat tampilan blog kita menjadi lebih profesional.

77 komentar:

  1. Gimana edit lama di template download?

    BalasHapus
  2. kebetulan saya sudah menerapkannya di blog saya sob, tapi caranya sedikit berbeda dengan yang sobat utara diatas untuk membuat tab view, tapi pada dasarnya yg penting bisa membuat tabvie pada blog,, sukses seallu sobat...

    BalasHapus
  3. Terimakasih tutorialnya..Saya menggunakan Fasilitas MBT,,lebih otomatis..

    BalasHapus
  4. kalo aku pake bawaan aja, maklum belum bisa yg macem macem bang

    BalasHapus
  5. Pena hadir dan absen pagi sob di hari minggu...Tipsnya bagus sob..

    BalasHapus
  6. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  7. met pagi bro...maaf br buka blog lagi, nice tips bro..lanjutkan..

    BalasHapus
  8. @anime lover:

    1. masuk ke edit HTML.
    2. klik expand template widget.
    3. ketik Ctrl+F pada keyboard.
    4. cari judul salah satu contoh laman yang disediakan.
    5. ketika sudah ketemu, ganti dan edit sesuai selera.

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
  9. @Asis Sugianto:

    iya, trims ya sudah berkunjung. :)

    BalasHapus
  10. @Dangstars Weblog:

    trims ya untuk tambahannya.

    BalasHapus
  11. @Mbah bejo:

    silakan lain kali dicoba jika berminat. :)

    BalasHapus
  12. @Venomia Blog:

    selamat berkunjung ya. :)

    BalasHapus
  13. Menu tab view memang tepat digunakan untuk menghemat ruang di sidebar kita. Selain itu juga untuk mempermanis widget agar tidak berhamburan...nice tips and happy blogging!

    BalasHapus
  14. terimakasih gan infonya sangat bermanfaat

    BalasHapus
  15. Tutorialnya komplit jelas banget nih, tapi kayaknya kalau bagi orang yang gak suka ribet alias suka yang instan-instan tinggal menikmati saja, sekarang banyak templet yang sudah menyediakan menu tab view seperti ini. kaya templet punya saya juga aslinya ada, tapi kemudian saya buang dengan tanpa alasan. hehehe..

    BalasHapus
  16. Contoh yang masih ada menu tab view di sini di blog keyword terkenal, tapi kemudian juga saya biarkan begitu saja gak di isi apa-apa

    BalasHapus
  17. tab viewsnya bisa saya terapkan di salah satu blog yg saya urus. terima kasih sobat...

    BalasHapus
  18. oh ya bro ane ada buat smart tab widget...hitam punya bro...ok keep spirits for nice blogging

    BalasHapus
  19. @Iskaruji dot com:

    trims sudah berkunjung bro. :)

    BalasHapus
  20. @internet gratis:

    trims untuk apresiasinya.

    BalasHapus
  21. sangat membantu nih postingannya.. thanks yah..

    BalasHapus
  22. @ilmu komputer:

    benar.
    tata letak dan desain template blogspot gratisan sekarang ini sudah banyak yang menggunakan fitur2 terbaru dalam blogging. hal ini kebanyakan karena template tsb merupakan hasil konversi dari WP yang bersifat premium di mana bagi seseorang yang berminat memilikinya harus membayar cukup mahal. :)

    BalasHapus
  23. @keyword terkenal:

    memang penggunaan widget ini harus disesuaikan dengan desain blog dan keperluan blogging kita. jangan sampai memasang widget yang tidak dibutuhkan.

    BalasHapus
  24. @Asis Sugianto:

    senang bisa membantu. semoga bermanfaat ya.

    BalasHapus
  25. @bloekoetoek:

    trims untuk tambahannya bro. semoga juga bisa bermanfaat.

    BalasHapus
  26. @Inspiring News:

    salam kenal.
    ditunggu ya kunjungan berikutnya. :)

    BalasHapus
  27. maaf sob,, kira2 kalau makin byk sub menu,, ada kemungkinan makin membuat blog kita lambat tdk ya,,,

    BalasHapus
  28. mantep ni om blognya, sangat cocok buat saya yang msh bru di bloger ni

    BalasHapus
  29. @al kahfi:

    semakin banyak menu yang digunakan maka ukuran blog akan semakin berat. akibatnya, secara otomatis loadingnya pun akan lebih lama.

    BalasHapus
  30. @Aplikasi Symbian's blog:

    ditunggu ya untuk kunjungan berikutnya. :)

    BalasHapus
  31. @anime lover:

    trims sudah berkunjung. :)

    BalasHapus
  32. wah lebih keren ni tab menu nya,mu ganti tp ribet bgt kalo pake hp :(

    BalasHapus
  33. 4 tab menu ya Gan,tertarik nie ane.Mohon ijin untuk diterapkan di blogku,aksih tipsnya,sukses selalu and happy blogging.

    BalasHapus
  34. panjang banget langkah-langkahnya Gan!!!

    BalasHapus
  35. @jocky:

    iya, kadang editing menggunakan hp juga susah saat utak-atik bagian HTML templatenya.

    BalasHapus
  36. @Er'end:

    silakan dicoba dan semoga berhasil ya. :)

    BalasHapus
  37. @Indra Saputra Ahmadi:

    dicoba saja dulu, tidak terlalu sulit.

    BalasHapus
  38. Masih bingung cara settingnya..hiks:(

    BalasHapus
  39. gampang, ikuti saja langkah2nya dengan pelan2. pasti bisa. ayo dicoba dan semangat ya! :)

    BalasHapus
  40. silakan dicoba. semoga berhasil ya.

    BalasHapus
  41. Makasih banyak infonya sob,sukses di terapkan di blogku.Cuma Menu 4 kenapa ga muncul ya,apa karena ukuran widget templateku hanya cukup untuk tiga Menu saja.Mohon pencerahannya kawan,thanks ya.

    BalasHapus
  42. itu yang pake kode * di ubah sesuai keinginan nya ya /
    tapi contoh ukuran nya berapa aja ?
    aku juga kurang paham sm kode warna nya . hahah

    BalasHapus
  43. @Laras Mays:

    bisa jadi lebar sidebar memang tidak memungkinkan untuk menampilkan 4 tab menu sekaligus. :)

    BalasHapus
  44. @curiosity of pia:

    kalau ada kode * itu dimungkinkan untuk adanya perubahan elemen sesuai keinginan kita. jika belum paham tentang kode HTML warna, silakan baca kembali artikel tentang macam2 kode html warna di sini,

    http://www.panduanbelajarblog.com/2011/06/macam-macam-kode-html-warna.html

    BalasHapus
  45. Bang ngga ada yang lebih simple ya ....

    BalasHapus
  46. untuk sementara cara ini bisa dicoba dulu. kode yang panjang tersebut tidak akan terlalu berpengaruh terhadap kecepatan loading blog kita.

    BalasHapus
  47. bro bisa di buat dengan contoh gambar ngak ?
    kagak ada menu rancangan di blog gw ,,plis ya bro ,

    BalasHapus
  48. coba ubah tampilan dasbor blogger kita dengan tampilan lama.

    BalasHapus
  49. kalau cara mengisis menu nya gmana gan/????????

    BalasHapus
  50. tul tuh Gan, cara ngisi menunya gimana? g mungkin kan kita isi peke menu LALAPAN? xixixixi trims jawabannya n sukses selalu

    BalasHapus
  51. thanks kk nanti akan saya coba..
    salam blogger..

    BalasHapus
  52. sangat informatif....terima kasih banyak..

    BalasHapus
  53. Assalamu'alaikum,.w..w..
    Mudah2an tips ini bisa saya coba. Terima kasih Pak

    BalasHapus
  54. ga ngerti maksudnya "isi menu" itu apanya??? link kah atau apa??

    BalasHapus
  55. agak ribet juga ya, bro?
    ada metode laen ngga?
    di blog saya, saya pengen menyandingkan widget "recent comment" dgn "popular post" yg sdh duluan ada.

    nah, kalo saya pake tutorial di atas kan hrs dirubah lg tuh yg popular pos. bisa ngga tgl ditambahin biar si "recent comments" langsung nyatu dgn popular pos itu?
    *pertanyaan bikin susah* ;P

    BalasHapus
  56. kalau tabs bawaan blogger, bagaimana cara menambah ukuran tingginnya mas,.. mohon pencerahan...

    BalasHapus
  57. Ini dia yang aku cari,, Thanks infonya, sangat bermanfaat sekali,,
    Sukses,,

    BalasHapus
  58. makasih infonya gan,sangat bermafaat sekali buat saya untuk pembelajaran . dari redaksi jurnalduniacom

    BalasHapus
  59. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  60. mantap dah aritkelnya
    http://acemaxs31.com/

    BalasHapus
  61. mantaap gan artikelnya
    http://grosiracemaxstasik.com/ace-maxs/

    BalasHapus
  62. Terimakasih atas informasinya sangat bermanfaat :)

    BalasHapus
  63. Nice artikelnya :)
    http://jellygamatgoldg31.com/obat-herbal-kolesterol-tinggi/

    BalasHapus
  64. makasih banyak buat infonya gan,, nice post..

    http://goo.gl/z9xiK4 - obat jantung koroner

    BalasHapus
  65. Keren sob artikelnya, izin nyimaknya :)
    http://goo.gl/n3Bp8g

    BalasHapus
  66. Terimakasih banyak sob, sangat membantu sekali artikelnya..

    BalasHapus
  67. Thanks sob untuk informasinya :)
    http://goo.gl/YUIEmw

    BalasHapus