Cara Mudah Membuat Tab View Menu


Sebelumnya saya mohon maaf yang sebesar-besarnya kepada Kang Etam Grecek yang berkali-kali bertanya tentang cara buat menu yang diatas buku tamu yaitu penggabungan daftar isi, komentar terakhir dan top komentator gimana caranya?, tapi baru kali ini saya baru bisa mempostingnya. Cara ini dibuat agar dapat menghemat space yang ada di blog kita. Dengan cara ini, kita dapat menggabungkan beberapa widget hanya dalam 1 tempat. Tips ini saya dapat dari salah satu guru saya yaitu Mas Dody Farial.

Untuk membuatnya, silahkan ikuti beberapa langkah berikut :
1. Login di akun Blogger Sobat
2. Klik "Rancangan" (Dulunya "Tata Letak") => "Elemen Laman"
3. Klik "Tambah Gadget"
4. Selanjutnya, copas kode di bawah ini :
<style type="text/css">
div.TabView div.Tabs
{height: 40px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 85px; /* Lebar Menu Utama Atas */
text-align:center ; height: 100px; /* Tinggi Menu Utama Atas */
padding-top:1px; vertical-align:left; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:0px; -moz-border-radius-topright:0px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #E6E6E6; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #BDBDBD; /* Warna border Kotak Utama */ overflow:hidden; background-color:#E6E6E6; /* Warna background Kotak Utama */ }
div.TabView div.Pages div.Page {height:100%; padding:0px; overflow:hidden}
div.TabView div.Pages div.Page div.Pad {padding: 1px 1px}
</style>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 270px;" class="Tabs">
<a>Judul Gadget 1 (Misal Daftar Isi)</a>
<a>Judul Gadget 2 (Misal Komentar Terakhir)</a>
<a>Judul Gadget 3 (Misal Top Komentator)</a>
</div>
<div style="width:260px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 1 ( Misal : Script Daftar Isi)
</div>
</div>
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 2 ( Misal : Script Komentar Terakhir)
</div>
</div>
<div class="Page">
<div class="Pad">
ISI TAB VIEW MENU 3 ( Misal : Script Top Komentator)
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

5. Klik "Simpan"

Keterangan :
Sobat bisa mengubah Lebar Menu Utama Atas, Tinggi Menu Utama Atas, Warna border Menu Atas, Font Menu Utama Atas, Warna Font Menu Utama Atas, Warna background Menu Utama Atas, Warna border Kotak Utama dan Warna background Kotak Utama

Cara Mudah Membuat Tab View Menu Rating: 4.5 Diposkan Oleh: muzzy musthofa

100 komentar:

  1. pertamax... he he
    eh mau tanya mas muzzy...
    gimana sih scrip daftar isi, terus script top komentator, ama script komentar terakhir... ??
    makasih sebelumnya

    BalasHapus
  2. Kalau saya bukan pakek cara itu.. kalau menurut saya low,, tab view tu modelnya agag biasa.. tetapi mudah di modif. kalau punya saya itu elegan tapi sulit di edit. yang penting tab viewnya dapat di gabungin antara shout box, daftar isi, recent comment, top comment, ma link exchange.. :D

    for argentina nya.. kita sama2 mendukung mas..

    BalasHapus
  3. mang tab view yang ke gimana mas, tp kl k gini load blog jd lama g ya mas.soalnya blogku kl load sekarang malah agak lama dari biasanya,heee...

    BalasHapus
  4. sama ga ya kang ma punya ku... kayanya sama deh...

    BalasHapus
  5. tips yang menarik dan layak tuk dicoba.

    BalasHapus
  6. Wah aku dari awal blum mau pake tab view Sob......klo tab view yg model berita detik.com sih aku udah pake di blogku yg satuynya,....tapi klo buat menu...aku lebih suka yg berantakan haha...


    Met aktivitas Ya Sob!!!

    BalasHapus
  7. mas muzzy selalu saja punya trik trik bagus

    BalasHapus
  8. aku ijin copas ne kang...
    trims infonya

    BalasHapus
  9. Thanks y atas infonya. Sy perlu yg kyak gini. akan sy coba sobat.

    Oh y, request sy belum d posting y mas?

    BalasHapus
  10. seperti yang fitempatnya mas ini bukan..?

    BalasHapus
  11. wah , comment no 13 aq . . ,

    nice info nich , btw bikin lemot bLog g sob ?? aq juga pengen masang soaL e , gadget bisa diringkas jadi 1 . . , :24

    BalasHapus
  12. hohohoho, tab viuw 3 kolom

    BalasHapus
  13. walah javascript ku dah numpuk mas muzzy....
    kalau yang pake css3 ada gak??

    BalasHapus
  14. thanks ya kang muzzy.........
    akhirnya`di posting juga,td ak udah nyoba.tapi klo mo ngikuti yg seperti kang muzzy.sperti daftar isinya dan recent comment aku hrus nmbah dulu nh...krna kan masang scriptnya...
    tenyata bawaan blogger kyak label g bs ya kang...

    trima kasih ya kang

    BalasHapus
  15. wah keren nih tab view tanpa edit HTML, jadi g terlalu ribet....

    dengan seng hati apa berkenen mampir ke gubuk saya mas muzy

    BalasHapus
  16. ijin save ya mas muzzy, thanks infonya

    BalasHapus
  17. visit back sobat... anda berkunjung saya pasti kunjung balik... namanya jg silaturahmi.. :)

    BalasHapus
  18. gagal nih bro... untuk kesekian kalinya... bantu dong

    BalasHapus
  19. wah ane tlat terus neh buat dateng ke sini!!
    sukses slalu kang!!

    BalasHapus
  20. Gan, ijin bookmark ya.. siap tau ntar perlu... soalnya lgi buat blog baru.. he he..

    BalasHapus
  21. Kang, widged yang ini kemarin tak pasang ulang kok error ya, pripun?

    BalasHapus
  22. termksh saya mau coba dulu sob di blog satu nya

    BalasHapus
  23. salam sukses mas.. dapat award ni. diambil okey..

    BalasHapus
  24. Keren sob..ane copy dulu kode nya y sob,thnxs

    BalasHapus
  25. oh tab view menu seperti yang di blog ini ya mas, izin copy codenya, aku mw coba juga, terima kasih.

    BalasHapus
  26. sebenarnya saya juga mau nanya mengenai postingan kaLi ini, tapi berhubung sudah disamber duLuan oLeh om etam grecek jadi tinggaL tunggu hasiL aja deh. hehehe...
    aLhamduLiLah hari ini sudah terjawab semua pertanyaan saya yang diwakiLi oLeh beLiau. mau coba ach, semoga berhasiL biar enggak ngerepotin om muzzy.

    nah nih pertanyaan saya yang beLum sempat terjawab, bagaimana cara membuat "back to top" seperti yang berada di pojok kanan bawah apada bLog ini.
    terima kasih yah om atas tutor dan jawabannya.

    nah

    BalasHapus
  27. wah, ni yg q cari" mas, bookmark dulu dech biar bs d praktekin, makasih :)

    BalasHapus
  28. Keren banget... hanya tinggal copas dan jadi deh... blogwalking kesini... Peace :)

    BalasHapus
  29. Wah bermanfaat banget infonya sob,,,makasih uda share,,,,

    BalasHapus
  30. assalamu'alaikum wr wb
    makash infoy..tp sbnry sy msh mrasa ksulitn untk m'aplikasikny..
    sblum d copy statemen sblumy it hrus dhpus dlu atw tingl dtmbh sja..
    mksh . . .

    BalasHapus
  31. Coba dulu ah, cpa tahu cocok buat templateku,,, makasih infona mas, maaf baru bisa berkunjung....

    BalasHapus
  32. wkwkwwk.. kok bisa kebetulan sama ya postingan terakhir kita.. :D ajib..

    BalasHapus
  33. belum sempat nh kang buatnya...
    lg sibuk dgn kerjaan...
    ntar klo sdh buat tak infokan siapa tau ada salahnya

    BalasHapus
  34. oh jadi gini toh caranya. aku sering sih liat web ato blog pake cara kayak gini tapi gag tau triknya. sekarang akhirnya tahu. aku save dulu yah, ntar kalo butuh aku langsung praktekin. makasi ya infonya

    BalasHapus
  35. sangat mendukung perkembangan blog...

    BalasHapus
  36. kemarin2 pusing dengan perubahan modul 'tata letak' jadi 'rancangan'. Oalah, baru nemu penjelasannya disini. trims pak Muzzi =D

    BalasHapus
  37. bagus mas, langsung ke tkp pelajari dulu. makasih infonya..

    BalasHapus
  38. singgah bersilaturrahmi kang musthofa
    sukses dan sehat selalu
    salam tuk keluarga di sana

    BalasHapus
  39. post baru saya, saya comot dar blognya hitam putih kehidupan pemilknya cewek namanya Hanna Pertiwi

    Alhamdulillah saya sehat dan kabar baik

    belum ada post baru ?

    BalasHapus
  40. wah tips-nya keren banget..sayang diblog saya terlihat kurang dinamis kalo dipasangin tab ini,tapi terimkasih,infonya keren

    BalasHapus
  41. tentu saja mau sobat, nie artikelnya keren juga he..he..he. Tolong sobat dukung blog saya masuk top google dengan keyword tips seo, tips bloger, tips komputer, belajar javascript, alnya masih urutan dua puluhan, cuma keyword tips seo blogger aja yg nangkrng di top 10

    BalasHapus
  42. oke sob mau aku coba di blog satunya thnks

    BalasHapus
  43. Nice info gan.... thanks....

    BalasHapus
  44. Sob, mau nanya, klo kita menggunakan tab view seperti ini. apakah juga berfungsi mengurangi loading blog kita? mksudnya dg menggunakan tab view blog kita akan menjadi lebih ringan?

    BalasHapus
  45. Terimakasih Tutornya
    Sobat muzzy,makin sukses dan mantab

    BalasHapus
  46. artikel yg bermanfaat, salam kenal yah... :38
    sudah seharusnya kenali dan dalami agama buat bentengi arus informasi yg negatif.

    BalasHapus
  47. makasih atas infonya bung.
    baca sejarah disini..

    BalasHapus
  48. wahhh... terima kasih for tutorial :)

    BalasHapus
  49. wuih dah 55 nih komntarnya, msih sempet baca ga ya komenku nih,heheeee...

    BalasHapus
  50. manteb kang, hahaha, rncana mau posting ini jg, dah kburu tp, tp gpp lah, yg ptg bs berbagi buat tmn2 blogger :) keep share kang ...

    BalasHapus
  51. masih bingung nih om untuk peLetakan scripnya, misaLnya pada scrip daftar isi. untuk posisi peLetakannya masih beLum tau.

    BalasHapus
  52. Perlu dicoba ne.. Thanks sharing infonya!

    BalasHapus
  53. Blog berat terjadi karena kebanyakan memakai javascript terutama pada tab view widget atau tab menu makanya untuk blog milikku tab view widgetnya aku hapus karena gak begitu penting. Sebagai contoh blog Kang Rohman yang notabene gak banyak javascriptnya.

    BalasHapus
  54. Tab view...solusi hemat sidebar nan elegan

    BalasHapus
  55. Nice bro. . .thx ya info.a. . .

    BalasHapus
  56. Nice bro. . .thx ya info.a. . .

    BalasHapus
  57. info tambahan..
    Thanks sob..

    BalasHapus
  58. tab view bikin ringkas dan lebih rapi kelihatan

    BalasHapus
  59. dulu aku pernah punya sobat tapi ganti template hilang lagi deh

    BalasHapus
  60. met siang mas....selalu z dapat trik baru lo berkunjung kemari....thnxsss

    BalasHapus
  61. Tutorial yg menarik..
    Thx bro,

    BalasHapus
  62. seperti biasa kunjungan di tengah maLam, terima kasih om untuk tutornya. tapi saya masih agak bingung nih, hehehe... harap dimakLumi aja yah.

    BalasHapus
  63. seLamat pagi, semoga om muzzy dan keLuarga seLaLu daLam keadaan sehat dan afiat.
    mau menginformasikan nih, sekarang aku sudah pandai utak-atik tempLate Lho. hakhakhak...
    coba deh kunjungi bLog ku, beLum sempurna banget sih tapi Lumayan puasLah untuk seorang newbie yang banyak belajar dari om muzzy.
    terima kasih banyak yah om.

    BalasHapus
  64. wah...bagus juga nih mas....tapi aku dah pasang thu mas....dan gak mau rubah lagi..hehehe

    BalasHapus
  65. apa kabarnya hari ini kang muzzy..moga sehat sllu

    BalasHapus
  66. thanks infonya...
    coba dlu gan

    BalasHapus
  67. wah keren nich...
    bole dech di jajal dl...

    BalasHapus
  68. ohh,.bagus juga nih cara bikin menu kaya di atas,..menghemat tempat dan terlihat elegan,..thank ilmunya

    BalasHapus
  69. seperti biasa om berkunjung maLam, seLamat istirahat aja yah.

    BalasHapus
  70. yiaaa, yang kayak gini ni yang bikin orang pengen belajar dan punya blog keren.. makasih om infonya, dicoba ni..

    BalasHapus
  71. wah aqu masih blm ngerti ni gan... help me please, kok punya qu nda ngelink yo ??
    :23

    BalasHapus
  72. pengin nyobain...cuma agak membingungkan....coba tak pelajari dulu ah.....thanks infonya mas

    BalasHapus
  73. Bagus Triknya, makasih sob

    BalasHapus
  74. Kurang detail penjelasannya..Masing bingung :(

    BalasHapus
  75. untuk tab view waktu itu saya coba memang berhasil, cm ktika ada 2 tabview di sidebar sama di footer yg jalan cm 1, mungkin krn template bawaannya jd susah deh

    BalasHapus
  76. :11
    hmmmppphhhh pusiiinnggg ga bisa,,,

    BalasHapus
  77. emang kalo pake tab view bisa menghemat tempat.

    BalasHapus
  78. Makin Mantap aja Nich Bang Muzzy....:)

    Sukses selalu bang....

    BalasHapus
  79. @ Kristiyana shinta: Klo di baca dgn baik-baik pasti kamu bisa itu kan bang muzzy sdh menjelaskannya step by step,,,:)

    @ bang rachmat: Setidaknya bgtulah bang untuk mengurangi lah hehhehhee.....:)

    BalasHapus
  80. Saya coba dulu ya. Mau saya pakai buat bikin komentar & artikel terbaru

    Oh ya, kalau sempat tolong mampir di blog saya ya. Trims

    BalasHapus
  81. halo kawan,,hank infonya ....

    BalasHapus
  82. terima kasih banyak kang...

    Berhasil...berhasil...

    BalasHapus
  83. salam kenal .
    makasih buat langkah.langkahnya .
    sukses .

    BalasHapus
  84. boleh juga tipsnya, saya mau coba bos biar blog ane tambah ok :), thx infonya yah

    BalasHapus
  85. salam kenal .
    makasih buat infonya .

    BalasHapus
  86. Cara melebarkan tab view nya gmana sob?

    BalasHapus
  87. MAKASIH BANGET GAN, JADI TAMBAH ILMU NECH.

    BalasHapus
  88. makasih mas infonya, sangat membantu saya

    BalasHapus

Silahkan Sobat semua komentar disini. Segala kritik dan saran dari Sobat semua akan sangat berguna bagi kemajuan blog ini.