Membuat Tab View Di Blogger

Selain digunakan untuk Daftar link, tab view bisa digunakan untuk apa saja sesuai kebutuhan sehingga dapat mempercantik tampilan blog kita.

Menarik bukan?................ Jika anda ingin menambah tab view ini ke blog anda Silahkan ikuti langkah-langkah berikut: Masuk ke Blogger anda kemudian klik Rancangan=>> Tambah Gadget=>> Pilih HTML/Javascript=>>Copy Kode dibawahi dan masukan kedalamnya:

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

}

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

div.TabView div.Pages {
width: 275px;
height: 250px;
clear: both;
background-color: #fff;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border: 2px solid #00f;
overflow: hidden; }

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

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

</style>

<ul>
<li>Ini View Tab 1</li>
<li>taruh link kamu disini</li>
<li>taruh link kamu disini</li>
</ul>

</div>
</div>

Kamu bisa memasukkan ,image,link, atau script apa saja disini

</div>
</div>

</div>
</div>
</form>

Klik Simpan.

Blog Trick

Gadget blogger

Pengikut

Membuat Tab View Di Blogger

0

Silahkan Tulis Komentar Anda ...