Membuat Tab View Di Blog


Selection_031

Langsung aja berikut saya share cara membuat Tab View di blog untuk mempercantik dan membuat simple tampilan blog.

langsung aja berikut caranya:

1. Login ke blog/Dasboard.

2. Masuk ke bagian Tata Letak

3. buat widget (htnl/javascript)

4. masukkan kode berikut:

<style type=”text/css”>
div.TabView div.Tabs{
height: 40px;overflow: hidden;}
div.TabView div.Tabs a {
float:left; display:block; width: 102.6px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #ccc; /* Warna border Menu Atas */ text-decoration: none;
font-weight:bold; color:#696969; /* Warna Font Menu Utama Atas */ }
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #FFFFFF; border:1px solid #ccc; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #ccc; /* Warna border Kotak Utama */ overflow:hidden; background-color:#fff; /* 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: 5px 5px;margin-bottom:10px;}
</style>
<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>
<form action=”tabview.html” method=”get”>
<div id=”TabView” class=”TabView”>
<div style=”margin-left:2px;width: 314px;” class=”Tabs”>
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div style=”margin-left:2px;width:314px; height:330px; ” class=”Pages”>
<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>

 

tinggal sesuaikan judul dan content yang akan sobat masukkan kedalam tab view.

Demo

kalau kurang paham bisa ditanyakan dikomentar

One Comment Add yours

  1. google mengatakan:

    Good day very nice website!! Guy .. Beautiful .. Wonderful ..
    I’ll bookmark your web site and take the feeds also? I’m happy to search out so many helpful information here in the publish, we need develop
    extra strategies on this regard, thank you for sharing.
    . . . . .

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s