MEMBUAT MULTI WIDGET TAB VIEW

MEMBUAT MULTI WIDGET TAB VIEW. Fungsi dari Multi Tabview sebenarnya untuk menghemat sidebar atau ruang widget anda. Dengan menggunakan widget Multi Widget Tab view ini anda akan menghemat ruang sidebar karena anda bisa menaruh 3 widget sekaligus pada 1 kolom widget yang tersedia tombol
untuk membukanya bergantian. Widget ini sangat bermanfaat untuk memanfaatkan ruang terbatas pada blog anda. Oke sobat tidak usah berlama-lama, berikut untuk model bentuk dari Multi Widget Tab View bisa anda lihat gambar di bawah ini, sedangkan untuk cara membuat multi widget tab view silahkan ikuti langkah-langkahnya silahkan anda teruskan membaca artikel ini.

1. Silahkan Login ke Akun blogger anda.
2. Masuk ke 'Design' lanjutkan ke 'Edit HTML'
3. Cari kode ]]></b:skin>
4. Copas kode di bawah ini, kemudian letakkan di atas kode ]]></b:skin>

div.TabView div.Tabs{height:25px; overflow:hidden}

div.TabView div.Tabs a{float:left; display:block; width:98px; /* Lebar Menu Utama Atas */text-align:center; height:30px; /* Tinggi Menu Utama Atas */padding-top:3px; vertical-align:middle; border:1px solid #fff; /* Warna border Menu Atas */border-bottom-width:0; text-decoration:none; font-family:"Verdana",Serif; /* Font Menu Utama Atas */font-weight:bold; color:#000; /* Warna Font Menu Utama Atas */-moz-border-radius-topleft:2px; -moz-border-radius-topright:2px}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active{background-color:#b2dfdc; /* Warna background Menu Utama Atas */}

div.TabView div.Pages{clear:both; border:1px solid #fff; /* Warna border Kotak Utama */overflow:hidden; background-color:#transparent}

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

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

5. Silahkan Save Template anda
6. Lalu kembali anda masuk ke 'Design' kemudian klik 'Add a Gadget'
7. Kemudian klik/ pilih 'HTML/Javascript'
8. Kemudian Copy paste kode dibawah ini :

<style type="text/css">

div.TabView div.Tabs a

{

float: left;

display: block;

width: 98px; /* Lebar Kotak Tab */

height: 22px; /* Tinggi Menu Utama Atas */

text-align: center; /* Posisi Teks Menu Tab */

margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */

background-color: #222222; /* Warna background Kotak Tab */

padding-top: 2px; /* Spasi Atas */

border: 1px solid #ffffff; /* Warna border kotak Tab */

border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */

font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */

font-weight: 900; /* Ketebalan Teks kotak tab */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #736F6E; /* Warna background utama kotak tab */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #cccccc; /* Warna border Kotak Konten */

overflow: hidden;

background-color: #ffffff; /* Warna background Kotak konten */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 5px; /* Jarak teks dalam kotak content */

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

</style>

<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 300px;" class="Tabs">

<a><span style="color:white">TAB 1</span></a>

<a><span style="color:white">TAB 2</span></a>

<a><span style="color:white">TAB 3</span></a>

</div>

<div style="width: 300px; height: 180px;" class="Pages">

<div class="Page">

<div class="Pad">

SILAHKAN ANDA GANTI DENGAN Kode HTML Content Widget PADA TAB 1

</div>

</div>

<div class="Page">

<div class="Pad">

SILAHKAN ANDA GANTI DENGAN Kode HTML Content Widget PADA TAB2

</div>

</div>

<div class="Page">

<div class="Pad">

SILAHKAN ANDA GANTI DENGAN Kode HTML Content Widget PADA TAB3

</div>

</div>

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

<script style="text/javascript" src="http://projectloss.googlecode.com/files/tab_view.js"></script>

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

9. Pada tulisan yang di blog hijau, silahkan ganti dengan kode widget yang akan anda masukkan.
10. Jika sudah selesai, silahkan save dan lihat hasilnya
11. Untuk keserasian kolom sidebar anda, anda bisa merubah ukuran kolom widget maupun lebar dan tinggi tab pada huruf yang berwarna merah. Oke sobat begitulah cara membuat Multi Widget Tab View, semoga artikel ini bermanfaat.
Selamat mencoba.

Share :