Mempersingkat satu elemen halaman menjadi 3 bagian atau lebih yang masih-masing berisi wigget berbeda...
silahkan loggin ke tata letak >> edit html >> chek expand widget template dan cari kode ]]></b:skin>
Pastekan kode CSS berikut di atasnya
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px;
text-align: center;
height: 24px;
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: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Lalu cari kode </head> dan pastekan javascript berikut di atasnya :
<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>
Simpan template anda dan selesai di sesi ini, kemudian kita masuk ke elemen halaman, kemudian tentukan di mana anda akan meletakan tabview anda sendiri (Mungkin di sidebar kanan/kiri/bawah/atas), klik add gadget atau tambah gadget, pilih javascript/Html lalu pastekan kode di bawah ini :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Setelah selesai, klik aja simpan/save dan lihat hasilnya. Tab view milik anda sendiri telah selesai di buat.
Keterangan :
Warna merah pada CSS adalah padding, width dan height serta warna dasar dari ini tab view yang harus anda sesuaikan dengan blog anda, maka dari itu coba dulu di blog percobaan yah.....
Warna kuning adalah warna judul dari masing2 tab misal di blog saya (Hot News | Note's | Tutorial)
Warna Hijau adalah isi dari masing2 tab....pko'e yang berupa script misal script iklan, recent post atau yang lainya, terserah yang ingin anda masukan di situ apa......
Semoga sukses membuat tab view, oh ya di sini hanya di berikan contoh membuat tab view dalam 3 bagian saja, sebenernya bisa di buat menjadi 4 atau 5 bahkan lebih....untuk itu silahkan utak2 bagian CSS nya sendiri...saya yakin pasti bisa asal berusaha, ya ndak hehe.......
Tulisan Terkait