Cara Membuat Menu Tab View ( multi-triple in one menu )

Menu tab view adalah menu yang bisa memuat 2-3 menu bahkan lebih dalam satu kotak ini berfungsi untuk meminimalkan halaman yang kita pakai selain itu menu ini juga bisa mempercantik tampilan pada blog kita.
Tampilan menu tab view seperti gambar di bawah ini :



Cara membuatnya sangatlah mudah hanya diperlukan ketelitian
Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 84px; /* Lebar Menu Utama Atas */
text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #999999; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #1E62B6; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFFFF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #999999; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* 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: 3px 5px;
}


4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>


6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 260px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>

</div>
<div class="Pages" style="width: 256px; height: 270px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div>
</div>


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

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


Keterangan :
- Angka2 atau text yang berwarna biru (260px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabview tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Subscribe to receive free email updates:

30 Responses to "Cara Membuat Menu Tab View ( multi-triple in one menu )"

  1. Terima kasih yang tak terucapkan, ini yang aku cari hampir seminggu gak bisa tidur...
    Semoga bermanfaat bagi banyak teman.
    Thx mas AdeS.

    BalasHapus
  2. kalo ini digunain sizenya gede banget gak ya??
    soalnya blog qu ja dah load bgt lok dibuka..
    ^_^

    BalasHapus
  3. waduw banyak amat sob coding nya

    mantap nich perlu untuk di jadikan acuan kalo nanti blog penuh dengan artikel

    makasih sob infonya

    BalasHapus
  4. sip bro, tp kl punyaku dah otomatis niuu

    BalasHapus
  5. wah..langsung jadi sob...dah lama aku coba bermacam-2 tips dari yang lain tapi baru tips sobat yang berhasil aku pasang...thank's BGT.

    BalasHapus
  6. iya scriptnya panjang, tapi makasih ya cause berguna banget

    BalasHapus
  7. nice post

    saya pernah mencoba 2 kali cara membuat tab view seperti ini namun hasilnya gagal, sampai akhirnya aku terdampar disini, awalnya sih males tapi ku pikir apa salahnya mencoba lalu saya coba, temen sekalian boleh liat hasilnya di sini

    thks a lot

    BalasHapus
  8. thx y bos 4 artikelnya,,,

    BalasHapus
  9. saya ndak nampak dimana kode ]]>
    di mana agaknya ya....

    rinsaq.blogspot.com

    BalasHapus
  10. ini dia yang kucari...thanks banget ya...

    BalasHapus
  11. Mantap gan.. Izin berexperimen dulu... ;)

    BalasHapus
  12. gan ni cara ngisi menu'y gimana, ??
    dah w pasang cuman muncul menu doank ga da isinya...

    BalasHapus
  13. mantabbss Om... Nambah ilmuu,, baruu blajarr ttg blog2nn nee heeee... thankss infonyaa...

    BalasHapus
  14. Banyak buangetttsss!!!!

    BalasHapus
  15. Makasih Banyak nih gan.... sya hampir aja putus asa karena cari2 tp gk ketemu2

    slam blogger .:: Pemula Blogger ::.

    BalasHapus
  16. nice inpoh...thank's so much..gan...

    BalasHapus
  17. tampilanxkok sderhana , kok tidak kyk conntohnya ???

    BalasHapus
  18. MANTAAPPPPP




    coba kesini yaa ALLL

    http://naufal-anis-ramadhan.blogspot.com/

    BalasHapus
  19. mas ade mau nanya nih jika judulnya panjang agar nomornya terlihat rapi gimana ya ...

    BalasHapus
  20. susah bgt pasangnya n jadi berantakan

    BalasHapus
  21. iya beda sama yang dicontohkan, tetapi cukup bagus, kalau contoh isi tabnya gimana sob apa manual satu persatu

    BalasHapus
  22. wah sngt membantu,,,,

    minta bantu follow nya ea,,, http://maditaser.blogspot.com/

    BalasHapus

Berkomentarlah dengan Baik dan Sopan..