Cara Membuat Widget Tab

Tentunya kamu ingin blog kamu kelihatan menarik dan juga rapi donk, apalagi jika blog kamu menggunakan dua kolom, perlu ditambah widget tab supaya lebih menarik, selain itu fungsi widget tab juga menghemat halaman. Dengan widget tab blog kamu akan kelihatan lebih variatif, menarik, ringkas. Nah langsung ke topiknya, kamu bisa membuat widget tab seperti ini:


Untuk membuat widget tab, ikuti langkah-langkah di bawah ini :
1. Menu Lay Out
2. Klik Add gadget >> HTML Script
3. Masukkan kode HTML berikut :


<style type="text/css">

div.TabView div.Tabs a
{
float: left;
display: block;
width: 100px;
height: 22px;
text-align: center;
margin: 5px 0px 0px 3px;
background-color: #000;
padding-top: 2px;
border: 1px solid #ffffff;
border-bottom: 1px solid #ccc;
font-family: "Arial, Helvetica, sans-serif", Arial;
font-weight: 900;

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc;
overflow: hidden;
background-color: #ffffff;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

</style>

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="WIDTH: 385px">
<a><span >Artikel Terbaru</span></a>
<a><span >Link Exchange</a>
<a><span >Pasang Iklan</span></a>
</div>
<div class="Pages" style="WIDTH: 300px; HEIGHT: 180px">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
Konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
Konten 3
</div>
</div>
</div></div></form>

<script src="http://www.hotlinkfiles.com/files/2663245_1fbgh/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>

4. Save Selesai

Catatan : kamu bisa mengganti tampilan tab sesuai konten blog kamu dengan mengganti kode warna merah, sedang kode warna hijau adalah judul dan isi tab ,kamu bisa ganti dengan yang kamu inginkan. Cukup jelas kan?? Selamat mencoba...