Cara Mudah Membuat Tab View

Setelah sekian lama sibuk dengan kerjaan akhirnya bisa membuat posting diblogku tercinta ini.. Sekarang aku mau sharing tentang cara mudah membuat tab view. Sebenernya cara ini sudah cukup familiar buat para pecinta blogger tapi mudah - mudahan aja masih berguna bagi kita semua, AMIN....

Salah satu keuntungan dengan kita memakai Tab View ini di blog kita adalah dapat menghemat tempat blog kita. Ga usah banyak basa - basi lagi kita langsung aja ke TKP...

Langkah pertama adalah :

1. Login ke blog Sobat
2. Masuk ke tata letak --> Edit HTML dan jangan lupa centang Expand Template Widget
   
3. Copy - Paste kode di bawah ini tepat di atas kode </head>
   

<script src='http://die-silver.googlecode.com/files/ardi33tabviewv2.js' type='text/javascript'/>

Langkah Ke dua adalah letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

div.Tabardi33 div.TFs
{height: 30px; overflow: hidden;}
div.Tabardi33 div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabardi33 div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabardi33 div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabardi33 div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabardi33 div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabardi33 div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

Kalo sudah langsung disimpan...

Langkah ke tiga adalah :

1. Menuju Elemen Halaman
2. Klik Add Gadget --> HTML/Javascript
   
3. Letakkan kode berikut dalam content

ipt><form action="tabardi33.html" method="get">
<div class="Tabardi33" id="Tabardi33">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 Sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 Sobat
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 Sobat
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 Sobat
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabardi33_name('Tabardi33');</scr

Perhatikan code yang bewarna biru dan hijau.
Langkah terakhir adalah simpan hasilnya... Trik ini Mr-Top dapatkan dari vanmovic.co.cc