Cara membuat Menu Tab View Di Blog

Dengan membuat menu tab view ini, blog kita akan tampil simple karena tidak banyak menyita tempat. tertarik memasang menu ini.

Berikut cara membuat menu tab view di blog

Silahkan masuk ke blogger

Kemudian masuk ke Edit Html

Letakkan kode berikut di atas </head>


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


Kemudian letakkan kode dibawah ini di atas ]]></b:skin>


div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px;

text-align: center;
height: 30px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD;
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif;
font-weight: bold;
color: #000;
-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;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD;
overflow: hidden;
background-color: #E6E6E6;
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Kamu bisa mengatur tinggi, lebar, warna . silahkan di edit.

Simpan template

Masuk ke eleman halaman

tambah gadget pilih Html/java script

copy paste script berikut



<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">

<a>judul 1</a>
<a>judul 2</a>
<a>judul 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">

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

silahkan kamu atur lebar, tinggi sesuai template blog kamu

Nb :

Warna pink adalah Judul dari menu tab tersebut, silahkan isi judul di situ.

Warna hijau adalah isi dari menu tersebut, kamu bisa isi dengan gambar atau link.

Baca juga : Membuat Menu Navigasi