Cara Mudah Membuat Menu Tab View Tree in one/3 Kolom

Menu Tab View Tree in one adalah menu yang bisa menampilkan tiga halaman dalam satu kotak,jadi sobat bisa mengisi tiga halaman dalam satu kotak tadi dengan widget yang berbeda,seperti Daftar isi otomatis pada halaman pertama,Recent Comments Blog halaman kedua,bahkan memasang TV Online bisa kita taruh pada halaman ketiga.Karena dengan keistimewaannya yang bisa menampung tiga halaman sekaligus dalam satu kotak,Menu Tab View Tree in one ini dapat mengurangi load page blog saat dibuka,selain itu Menu Tab View Tree in one ini juga dapat mengurangi space pada sidebar sehingga loading halamanpun dapat berkurang.
Untuk lebih jelasnya lihat gambar dibawah ini.

Untuk membuatnya sangat mudah sekali,sobat tinggal ikuti beberapa langkah dibawah ini.

1.Login Blogger.com.
2.Buka halaman Rancangan --> kemudian klil Edit Html.
3.Selanjutnya cari kode ]]></b:skin>
Kalo udah ketemu taruh kode dibawah ini tepat diatasnya.

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.Langkah selanjutnya sobat cari </head>
kalo udah ketemu taruh kode dibawah ini tepat diatasnya.

<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>

5.Save template
6.Setelah template tersimpan,sobat kembali lagi ke Rancangan --> lalu klik Add Gadget ditempat yang di inginkan,kemudian pilih HTML/JavaScript untuk menaruh kode dibawah ini.

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 260px;">

<a>MENU 1</a>

<a>MENU 2</a>

<a>MENU 3</a>

</div>

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

<div class="Page">

<div class="Pad">

ISI HALAMAN 1

</div>

</div>

<div class="Page">

<div class="Pad">

ISI HALAMAN 2

</div>

</div>

<div class="Page">

<div class="Pad">

ISI HALAMAN 3

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

tabview_initialize('TabView');

</script>

Perhatikan tulisan warna merah sobat bisa mengganti sesuai keinginan sobat,Mulai dari ukuran sampai isi halaman Menu Tab View Tree in one.

Semoga Brmanfaat Teman

Semoga artikel Cara Mudah Membuat Menu Tab View Tree in one/3 Kolom bermanfaat bagi Anda.