MEMBUAT TABVIEW WIDGET BLOG


Postingan ini adalah sebuah request dari seorang sobat saya yang waktu itu merequest postingan tabview yang sekarang baru sempat saya menaikan ke blog.

Tabview sebenarnya hampir sama dengan daftar isi scroll, bedanya tabview mempunyai kelebihan yaitu 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 sebagainya.

Contoh screenshot Tabview :


Langkah-langkah pembuatan tabview :

- Login 'Dasbor'
- Rancangan 'Elemen Laman'
- Edit HTML
Sebelum melakukan pengeditan pada template ada baiknya di backup terlebih dahulu, |klik| untuk tutorial backup template
- Centang pada Expand Widget
- Cari lah kode ]]></b:skin> untuk memudahkan pencarian tekan Ctrl + F, |klik| untuk tutorial cara cepat menemukan script

Jika sudah ketemu, Copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin>



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 ubah 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 terakhir, tambahkan script di bawah ini pada widget 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">

TAMBAHKAN TEXT, LINK, GAMBAR DLL DISINI

</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Selesai, save lalu lihatlah perubahan.
Jika anda ingin menambahkan Tabmenu nya tinggal menambahkan script <a>Tab 3</a>
<div class="Page">
<div class="Pad">
ISI 
</div> </div>

Kalau anda membutuhkan kode warna silahkan |klik| untuk melihat kode warna Html.
Mudah-mudahan tutorial ini mudah di mengerti oleh sobat yang merequest dan sobat-sobat pembaca lainnya, saya rasa cukup itu saja, jika ada yang kurang jelas silahkan berkomentar.

Comments for this entry

ijal fauzi

thanks gan, request ane terpasang. nanti ane coba ya ;)

ijal fauzi

masih bingung sih :(

Putra Tanjung

bingung dimananya sob?? tinggal copy paste aja kok sob.. pasti bisa

ijal fauzi

kode yg dimasukan seperti buat label "blogging" "daftar isi" gitu loh

Putra Tanjung

maksudnya gmna??

santosa!

widget dimana iya??? lupa...hehe

Putra Tanjung

@ santosa : elemen laman, gadget

Adrian

keren nih sob..thanks ya dh dishare..jngan lupa komen balik di blogku ya

Asmara Susanto

sob, mau tanya ane kan pake menu tab view jquery tp kok bentukny gk horizontal y malahan vertikal gmna tuh sob?
balles d komentar blog sy yah :D

Putra Tenzhung

@ Asmara Susanto : maksud ente bentuknya vertikal berarti memanjang kebawah dong? contoh kya gini :
Tab1
Tab2
Tab3 ??

berarti ngga seperti contoh berikut ini:

ngga seperti ini : Tab1 Tab2 Tab3

Asmara Susanto

ow iy ane coba dolo yah :D

Leave your comment

Thank you.