Promote Your Web Here

Get paid To Promote at any Location

19 May 2009

Membuat Tabview Widget

Tabview merupakan sebuah widget yang perlu digunakan untuk menyimpan beberapa konten dalam satu tempat, yang akan ditampilkan bilamana tab konten tersebut di klik olehnya.

Dalam pembuatan widget seperti ini banyak digunakan beberapa kode diantaranya berektensi Java Script.


Cara membuat TabView :
1. Masuk kedalam blogger sobat

2. Arahkan ke Tab "TATA LETAK/LAYOUT" ==> "EDIT HTML" ==> Beri tanda pada kotak disamping tulisan "Expand Widget Templates"

3. Jangan lupa untuk BackUp template sobat sebelumnya dengan menekan tulisan "Download Full Templates"

4. Cari Kode ]]></b:skin> kemudian Copy dan Pastekan Kode Berikut tepat diatas Kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #7A7A7A; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Californian FB", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #58FA58; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #000000; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #000000; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #000000; /* 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: 3px 5px;
}

5. Setelah itu Copy dan Paste Kode Berikut tepat dibawah kode ]]></b:skin>

<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>

6. Simpan Template Sobat.

Cara memasang Tabview Pada Widget/Sidebar
1. Tuju Halaman TATA LETAK/LAYOUT" ==> "PAGE ELEMENT" ==> "TAMBAH WIDGET"

2. Pilih HTML/Java Script"

3. Masukan Kode berikut ini :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Tab.1</a>
<a>Tab.2</a>
<a>Tab.3</a>
<a>Tab.4</a>
</div>
<div style="width: 100%; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">
Isi Konten Tab.1
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.2
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.3
</div>
</div>

<div class="Page">
<div class="Pad">
Isi Konten Tab.4
</div>
</div>

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

Keterangan :
- Pada kode yang Berkedip merupakan Jumlah Tab yang mau sobat masukan, terserah sobat mau membuat berapa Tab. Tinggal sobat menambahkan Kode yang sama seperti kode yang Berkedip.

- Pada Kode yang berwarna Kuning merupakan Tinggi Kotak Widget TabView yang akan sobat buat.

- Pada Text berwarna Merah merupakan Isi Konten yang akan di tampilkan pada masing-masing TabView.

Demikian cara membuat Widget TabView,Semoga dapat difahami. Selamat mencoba.

Comments :

9 comments to “Membuat Tabview Widget”

easyblogtrick said...
on 

kereeeen pren...

q dari dulu pengen posting ini g sempet2, males..hihihi

Semangat terus blogging and sharingnya y...

eRGe said...
on 

wah mantab brot ... emang ini yg aq cari2 .. makasih banyak brother ... artikelnya sangat membantu

salam sukses ...

chempluk said...
on 

keren sob,,mantap neh postingan nya

ridwanox said...
on 

wah nice info mas....tp blockquotenya glp banget terangin ya.....

Dapat Duit Tanpa Modal said...
on 

nahh ini yanglagi tak cari2,makasih banyak sobat

Belajar Mencari Uang di Internet said...
on 

saya dulu seneng banget sama tab view
tapi setelah ketemu widet expant collapse, tak ubrak-abrik tu tabviewnya. soale kalao expant collapt isinya disembunyiin semua. kalao mau lihat isi tingga klik judul seperti disidebar blog saya. otomatis isi widget tidak ikut loading. so loading blog amblaass

Arry said...
on 

Nggak terbiasa pake hal - hal yang ribet bos,, :)

Jualan Barang said...
on 

bisa tah.....coment di tempatq juga yach

ichwan said...
on 

thanks sob..
:D

Post a Comment

Followers

SUPPORT MY BLOG

SUPPORT ME !!

Komentator

Widget Oleh : Pit-Onta

BANNER

BeLaJaR DaLaM BLog

 

Copyright © 2009 by Kanzenk Blog's