Cara Membuat Tab View Widget di Blogspot

 

Sedikit membahas mengenai Tabview sebenarnya hampir sama dengan daftar isi scroll, bedanya tabview mempunyai kelebihan maitu tabmenu , sehingga daftar isi tabview tidak hanya berisikan satu kategori namun bisa lebih dari 2, Selain di gunakan sebagai tempat penampung daftar isi postingan, tabview juga bisa di isi dengan gambar, text, link, banner, widget followers dan lain-lain.

Untuk membuat widget Tabview di blogspot anda silahkan ikuti langkah berikut :

- Login 'Dasbor'

- Rancangan 'Elemen Laman'

- Edit HTML Sebelum melakukan pengeditan pada template ada baiknya di backup terlebih dahulu,

- Centang pada Expand Widget

- Cari lah kode ]]></b:skin> untuk memudahkan pencarian tekan Ctrl + F, Jika sudah ketemu, Copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}

div.TabView div.Tabs
{
height: 24px;
overflow: auto;
}

div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 30px; padding-top: 3px;
vertical-align: middle;
border: 1px solid #000000; border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Times New Roman, Serif; font-weight: 900;
color: #000080;
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD;
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; border: 1px solid #000000; overflow: auto;
}

div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: auto;
}

div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


}

Tinggi, lebar, warna, border bisa di ganti sesuaikan pada script di atas.
Next, cari kode </head> jika sudah ketemu copy script di bawah ini lalu paste tepat di atas kode </head>

<script type='text/javascript'>

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>

Langkah selanjutnya, tambahkan script di bawah ini pada HTML / JavaScript di blog anda :

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

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

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

<a>Tab 1</a>

<a>Tab 2</a>

</div>

<div class="Pages" style="width: 300px; height: 250px;">



<div class="Page">

<div class="Pad">



TAMBAHKAN TEXT, LINK, GAMBAR DLL DISINI



</div>

</div>



<div class="Page">

<div class="Pad">



Silahkan di tambahkan Link, Gambar disini


</div>

</div>



</div>

</div>

</form>



<script type="text/javascript">

tabview_initialize('TabView');

</script>

Selesai, kemudian silahkan di save.....  Selamat mencoba...

Share this post