Membuat Tab View Menu Tanpa Edit HTML

menu Sebelumnya saya sudah pernah membahas tentang cara membuat tab view menu (menu dengan tab), namun dalam pembuatan tab view menunya kita harus mengedit HTML template.

Mungkin banyak sobat blogger yang takut gagal sehingga bisa merusak template, padahal tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu. Hot


Setelah berekksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya?

Baiklah, sekarang login ke blogger, kemudian pada Elemen Halaman sobat klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :

<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}

div.TabView div.Tabs a {float:left; display:block; width: 98px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; 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:bold; color:#000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
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: 5px 5px}
</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: 300px;" class="Tabs">
<a>Judul 1</a>
<a>Judul 2</a>
<a>Judul 3</a>
</div>
<div style="width:300px; height:250px; " class="Pages">

<div class="Page">
<div class="Pad">

Isi menu tab view 1 
</div>
</div>

<div class="Page">
<div class="Pad">

Isi menu tab view 2
</div>
</div>

<div class="Page">
<div class="Pad">

Isi menu tab view 3 
</div>
</div>

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

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

Untuk lebar menu, font, dan tinggi menu, sobat sesuaikan saja dengan lebar sidebar sobat.  Thumbs-up

Semoga bermanfaat !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

63 comments

29 November 2009 06.14

Ini dia yang saya cari. Makasi sob. Saya coba dulu nie.

29 November 2009 10.00

mantep beneer mksih kawand atas tutorinya yang ampuh abiz ini.

Salam dari Coodelz

1 Desember 2009 08.10

good good BOS...teruskan perjuangannya BOS....good good

10 Februari 2010 04.44

ikut nanya gan,,, JS-nya yang mana tuh gan???
aku pengen backup ndiri...

tapi ga tau yang mana???

yang ditandai warna biru ga kelihatan...

salam...

10 Februari 2010 06.51

@ Silverline Studio : maaf sobat, tulisan tsb blm sy update, karena tempo hr pernah merubah jS-nya tp lupa merubah tulisan paling bwh, skng sdh sy update..thanks atas perhatiannya sob

25 Februari 2010 14.38

thank sharingnya...

25 Februari 2010 16.36

wih sip nih, trus gimana cara menempatkan widget yang ada pada blog seperti label recent comment DLL

25 Februari 2010 20.17

@ Abdijayanet : sy blm prnh mencoba memasang label di tab view menu. untuk recent post bs sobat pasang yang ada di feature pada menu blogger

28 Februari 2010 00.15

gmn caranya buat tabel view menu seperti punya anda???

5 Maret 2010 21.49

trimakasih banyak nih atas infonya manfaat sekali

6 Maret 2010 16.11

nice info boss..
cara isi menu tab view gimana boss?

6 Maret 2010 16.20

@ Setiaguna : silahkan baca tutorial tab view menu yang pertama

11 Maret 2010 14.21

mas nanti hasilnya seperti tab view yang ada di blog ini yaa ?

11 Maret 2010 16.34

wah klo tab view seperti di blog ini lain lagi sobat, agak mirip lah tp modelnya biasa

11 Maret 2010 17.45

lebih banyak lagi scriptnya ?

14 Maret 2010 14.26

thanks boz info-y kren bnget... owy kalau di ijinkan postingannya boleh di reviewe di blog saya,,,!!! saya tidak akan mempostingnya kalau blm pnya ijin dari yang punya blog ini... mksh
lams knal dr www.chugygogog.blogspot.com

14 Maret 2010 15.11

@ chugy-gogog : silahkan posting ulang, tp tau aturannya kan?

23 Maret 2010 20.59

mas klo mau bisa memasang icon pada tab side barnya di tabview gimaan cara mas
kaya yang tab view manu yang mas varial punya ?..ada icon panahnya githu
mohon bantuannya

24 Maret 2010 03.07

@ Djody : lah kan sdh sy jelaskan di http://miscah.blogspot.com/2010/03/memasang-icon-tab-pada-sidebar.html

17 April 2010 05.48

mas gimana sih cara membuat text/link BESAR kecil kayak punya mas muantep mas ditambah lagi labelnya juga BESAR kecil tolong ajarin ia....

19 April 2010 20.50

mas..tolong dijelaskn lebih detailnya..!!!
*/ Lebar Menu Utama Atas */ ,maksud itu harus diganti pa tidak..saya coba kok cuma menu tab view ja kok ga seperti milik mas..ada scrool nya..?
boleh aku minta almat Ym mas..atas jawabanya
yhx..!!

11 Mei 2010 00.02

mantap neeh infonya, ini yang lagi aq cari, nggak ribet, mkasih bang tutorialnya, btw kalo bikin avatar di komentar seperti pnya bang micah gimana ya ?

15 Juni 2010 23.08

istimewa....................

16 Juni 2010 11.32

@aRya Bayu : coba baca postingan sy yg disini

16 Juni 2010 11.33

@* محمد سبحان : scroll pada menu tsb akan muncul dgn sendirinya jika isi tab menunya tinggi, silahkan otak-atik yg 250px

25 Juni 2010 13.57

wah... mantab nich... udah qw coba d blog qw.. n berhasil... ^_^

25 Juli 2010 23.18

Bro, sy jg script ini. Klo mau nambah garis horizontal, kode di taruh di mana ya? Mhn petunjuknya. Mksh sblmnya.

13 Agustus 2010 22.09

really really really really really really really thanks brooo!! ane sempet cari kemana-mana, disini ternyata ada yang baik hati banget udah ngebuat jadi mudah..sekali lagi, thanks berat broo!!

19 September 2010 17.29

om..kalau..mau tabnya lebih dari tiga gimana?

20 Oktober 2010 20.30

mantap... hasil eksperimen yang bagus... Langsung praktek :)

26 Oktober 2010 11.07

Jujur aja, kagum dan jatuh cinta pada widget popular posts dan recent comment nya sob !!!
Bgaimana cra pemasangannya???

27 Oktober 2010 15.47

Bos, untuk ganti warna dari tulisan isi di Tab viewnya bisa gak bos ?

27 Oktober 2010 22.01

@wakakak : bisa silahkan cek disini u/ kode wrna

27 Oktober 2010 22.03

@Wandhy : widget popular post kan sdh ada di blogger dan u/ recent comment bisa di cek disini

28 Oktober 2010 11.17

mas..untk nge-link gmn caranya..??thx

28 Oktober 2010 22.48

@anmupratech : begini contoh buat link :

<a href="http://miscah.blogspot.com/2009/11/membuat-tab-view-menu-tanpa-edit-html.html">judul postingan</a>

4 November 2010 07.11

wadduh ane telat nich gan,,
udah pasang yg prtama, skrg nemu yg ini,,jd bingung,,
tp makasih bgt info'y,,,

19 November 2010 19.11

oke deh...makasi.....

23 November 2010 16.08

setiap saya Isi menu tab view 1 , lalu mau nambah lagi link pake div, pemisah tapi ketika tambah lagi kenapa tidak ada, jadi dari judul 1-3 cuma bisa 2 link , gimana mas? supaya link bisa berjajar kebawah banyak..tolong kontak saya di 081909776929 segera makasih

23 November 2010 22.48

@coky : sy kasih contohnya saja ya

<div class="Page">
<div class="Pad">

<ul>
<li><a href="http://miscah.blogspot.com/2010/06/membuat-menu-vertikal-sederhana.html"> Membuat Menu Vertikal</a></li>

<li><a href="http://miscah.blogspot.com/2010/08/tutorial-penggunaan-google-fonts.html"> Tutorial Penggunaan Google Fonts</a></li>

<li><a href="http://miscah.blogspot.com/2010/08/keyboard-shortcuts-untuk-posting-di.html"> Keyboard Shortcuts Untuk Posting Blog</a></li>

<li><a href="http://miscah.blogspot.com/2010/09/navigasi-halaman-menggunakan-javascript.html"> Navigasi Halaman menggunakan JavaScript</a></li>

<li><a href="http://miscah.blogspot.com/2010/10/css-untuk-tulisangambar-berbayang.html"> CSS Untuk Tulisan berbayang</a></li>

<li><a href="http://miscah.blogspot.com/2010/10/tutorial-image-bubbles-menggunakan-css3.html"> Tutorial Image Bubbles</a></li>

<li><a href="http://miscah.blogspot.com/2010/11/cara-membuat-tulisan-besar-pada-awal.html"> Tulisan Besar Pada Awal Postingan</a></li>
</ul>

</div>
</div>

<div class="Page">
<div class="Pad">

<ul>
<li><a href="http://miscah.blogspot.com/2010/05/gris-amarillo.html" target="_blank">Gris Amarillo</a></li>

<li><a href="http://miscah.blogspot.com/2010/05/joogoo-green-template.html" target="_blank">JooGoo Green</a></li>

<li><a href="http://miscah.blogspot.com/2010/05/scopsore.html" target="_blank">Scopsore</a></li>

<li><a href="http://miscah.blogspot.com/2010/06/comercon.html" target="_blank">Comercon</a></li>

<li><a href="http://miscah.blogspot.com/2010/07/supredia.html" target="_blank">Supredia</a></li>

<li><a href="http://miscah.blogspot.com/2010/07/mosidebe.html" target="_blank">Mosidebe</a></li>

<li><a href="http://miscah.blogspot.com/2010/07/dore-zot.html" target="_blank">Dore Zot</a></li>

<li><a href="http://miscah.blogspot.com/2010/08/avieri.html" target="_blank">Avieri</a></li>

<li><a href="http://miscah.blogspot.com/2010/08/green-hurdico.html" target="_blank">Green Hurdico</a></li>

<li><a href="http://miscah.blogspot.com/2010/09/green-spitial.html" target="_blank">Green Spitial</a></li>

<li><a href="http://miscah.blogspot.com/2010/09/corst.html target="_blank">Corst</a></li>

<li><a href="http://miscah.blogspot.com/2010/11/alakadarnya-blogger-template.html target="_blank">Alakadarnya</a></li>
</ul>

</div>
</div>

<div class="Page">
<div class="Pad">

<ul>
<li><a href="http://www.mybloggerthemes.com"> Blogger Templates Gallery</a></li>

<li><a href="http://www.blog-zone.info"> Blog Zone</a></li>
</ul>

</div>
</div>

22 Januari 2011 20.38

thank's mass infonya..
keren banged..

27 Januari 2011 10.10

trimakasih info nya
bsa di cba thuu....

13 Maret 2011 01.41

aqu juga minta tutornya
untuk copy di blog saya

13 Maret 2011 14.28

Makasih ya mas...
ini yang saya cari dari dulu,,..

14 Maret 2011 16.29

mas, utk 'isi menu tab view' bisa diisi dengan html/javascript?seperti shoutmix.
klo bisa, gmn carany?
makasi

14 Maret 2011 20.54

Bagus sekali Infonya sob..... Thx, jg red-H Templatenya, setelah melakukan sedikit pengeditan, jadilah http://blogger-bugis.blogspot.com

15 Maret 2011 07.29

@Khairul Amri Dalimunthe : bisa saja mas khairul

16 Maret 2011 05.48

kunjungan pagi mas.......
boleh gak saya minta bantuan/ masukan buat tab menu yang ada di blog saya supaya serasi dengan dengan template.....
terima kasih....

28 Maret 2011 08.04

sip bagaimana supaya isinya tetap sama pada sidebar, apa ada kode scriptnya

29 April 2011 16.06

kenapa di template saya ga berjalan mulus ya OHM... can help me please????

12 Mei 2011 06.59

hasilnya bgus.. tp kalau bkn 2 tab yg ke-2 tidak terbuka.. mhn bantuannya ya..

21 Oktober 2011 21.40

makasih ilmunya ,,moga sukses,,,

4 Desember 2011 12.44

mas, gmn caranya supaya tab viewnya susun ke bawah ga kesamping, terus untuk tab1 jgn di tampilkan isi labelnya tp waktu di klik baru tampil, mohon penjelasannya, makasih....

18 Januari 2012 11.04

sangat bermanfaat \m/

17 Februari 2012 09.29

makasih bang, ane mau coba. tapi ko di ane cuma keluar 2 tab doang ya bang? padahal di sana kan ada 3 tab. kenapa kira kira ya bang?

25 Februari 2012 16.39

wah,... keren2 gan.
eh klo mo nambah 1 tab lagi gmn y carae gan jdi smuanya da 4 kolom.bsa ndak y kira2 gan?
mhon pncerahannya y gan,..

13 Maret 2012 02.01

TERIMAKASIH BANGET Mas...

Postingan ini sangat berjasa banget.
berkat sript yang mas kasih diatas sekarang telah membuahkan hasil di Blog saya ini:
http://daftarponsel.blogspot.com/

27 Mei 2012 15.29

gan misal yang mau dibikin tab itu widget gimana?

14 Juni 2012 12.31

makasih.....

24 Oktober 2012 09.06

thank's sob...

visite balik yaw http://warehousefor-download.blogspot.com/

13 Desember 2012 11.03

thanks sob,
tp masih bingung,
"ijin copas sob"

17 Desember 2012 00.23

Trimakasih turtorial nya

10 Januari 2013 21.34

makasih infonya akan saya coba nich, semoga berhasil

Poskan Komentar

Reader Community

Recent Comments