Tuesday

Cara Membuat Widget Tab View 3 Column

cara membuat Widget tab view 3 column sangat gampang gan gak ribet,cara ini juga tidak memerlukan edit template, jadi tinggal copy code nya dan tambahkan pada element halaman blog rekan-rekan, Ini kode nya:
<style type="text/css">
div.TabView div.Tabs
{height: 30px;overflow: hidden}
div.TabView div.Tabs a {float:left; display:block; width: 148px; /* Lebar Menu Utama Atas */
text-align:center ; height: 30px; /* Tinggi Menu Utama Atas */
padding-top:8px; vertical-align:middle; border:1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width:0; text-decoration: none; font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight:bold; color:#000000; /* Warna Font Menu Utama Atas */ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {background-color: #FFFFFF; /* Warna background Menu Utama Atas */ }
div.TabView div.Pages {clear:both; border:1px solid #000000; /* Warna border Kotak Utama */ overflow:hidden; background-color:#FFFFFF; /* 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}
</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="width: 300px;" class="Tabs">
<a>Postingan</a>
<a>Kosong</a>
</div>
<div style="width:300px; height:250px; " class="Pages">
<div class="Page">
<div class="Pad">
<script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script><script src="http://www.nama blog anda.blogspot.com/feeds/posts/default?orderby=updated&alt=json-in-script&callback=showrecentposts"></script>
</div>
</div>
<div class="Page">
<div class="Pad">
Isi menu tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

 Catatan:
Untuk width: 148px; /* Lebar Menu Utama Atas */ harus diperhatikan, karena untuk lebar sidebar diperlukan ukuran yg pas, khususnya jika anda ingin mengurangi atau menambah kolomnya,seperti punya saya awalnya itu 3 kolom, jadi saya buat menjadi dua kolom karena ukuran sidebarnya kecil. nah untuk menambah atau mengurangi tambahkan kode seperti di bawah ini(kalau mengurangi di hapus):
<a>Tambah lagi mas</a>
letakkan dibawah(bisa di atas,ditengah atau di samping hehe)
kode ini: <a>Kosong</a>

dan untuk isinya(yg diatas judulnya)
tambahkan kode ini:
<div class="Page">
<div class="Pad">
Isi menu tab 3
</div>
</div>
</div>
(dibawah,ditengah atau diatas)
kode:
<div class="Page">
<div class="Pad">
Isi menu tab 3
</div>
</div>

Untuk kode yg berwarna hijau, itu kode Recent post, bisa di hapus, kalau anda suka biarin ajahh, anda tinggal ganti Url blognya.
oke sekian dulu...selamat mencoba

Cara Membuat Widget Tab View 3 Column Rating: 4.5 Diposkan Oleh: eBlog-wayan

2 comments: