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. 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
  11. walah javascript ku dah numpuk mas muzzy....
    kalau yang pake css3 ada gak??

    BalasHapus
  12. 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
  13. wah keren nih tab view tanpa edit HTML, jadi g terlalu ribet....

    dengan seng hati apa berkenen mampir ke gubuk saya mas muzy

    BalasHapus
  14. ijin save ya mas muzzy, thanks infonya

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

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

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

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

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

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

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

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

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

    BalasHapus
  24. 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
  25. wah, ni yg q cari" mas, bookmark dulu dech biar bs d praktekin, makasih :)

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

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

    BalasHapus
  28. 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
  29. Coba dulu ah, cpa tahu cocok buat templateku,,, makasih infona mas, maaf baru bisa berkunjung....

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

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

    BalasHapus
  32. 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
  33. sangat mendukung perkembangan blog...

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

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

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

    BalasHapus
  37. 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
  38. wah tips-nya keren banget..sayang diblog saya terlihat kurang dinamis kalo dipasangin tab ini,tapi terimkasih,infonya keren

    BalasHapus
  39. 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
  40. oke sob mau aku coba di blog satunya thnks

    BalasHapus
  41. Nice info gan.... thanks....

    BalasHapus
  42. 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
  43. Terimakasih Tutornya
    Sobat muzzy,makin sukses dan mantab

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

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

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

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

    BalasHapus
  48. 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
  49. masih bingung nih om untuk peLetakan scripnya, misaLnya pada scrip daftar isi. untuk posisi peLetakannya masih beLum tau.

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

    BalasHapus
  51. 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
  52. Tab view...solusi hemat sidebar nan elegan

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

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

    BalasHapus
  55. tab view bikin ringkas dan lebih rapi kelihatan

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

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

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

    BalasHapus
  59. 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
  60. wah...bagus juga nih mas....tapi aku dah pasang thu mas....dan gak mau rubah lagi..hehehe

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

    BalasHapus
  62. thanks infonya...
    coba dlu gan

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

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

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

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

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

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

    BalasHapus
  69. Bagus Triknya, makasih sob

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

    BalasHapus
  71. 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
  72. :11
    hmmmppphhhh pusiiinnggg ga bisa,,,

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

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

    Sukses selalu bang....

    BalasHapus
  75. @ 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
  76. Saya coba dulu ya. Mau saya pakai buat bikin komentar & artikel terbaru

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

    BalasHapus
  77. terima kasih banyak kang...

    Berhasil...berhasil...

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

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

    BalasHapus
  80. salam kenal .
    makasih buat infonya .

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

    BalasHapus
  82. 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.