CARA MEMBUAT TAB VIEW UNIK (VERSI 2)

1. Login akun blog kalian
2. Masuk menu rancangan >>> edit html kemudian cari kode ]]></b:skin> lalu copy-paste kode dibawah ini :

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft 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:#1E90FF;
color: #333;
border-top:1px solid #FF0000;
border-right:1px solid #FF0000;
border-bottom:1px solid #FF0000;
border-left:1px solid #FF0000;
-moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px;
-webkit-border-top-right-radius:10px; -webkit-border-bottom-left-radius:10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #0000CD;
border-right:1px solid #0000CD;
border-bottom:1px solid #0000CD;
border-left:1px solid #0000CD;}
div.Tabateonsoft 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.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:2px double #FF0000; padding:0;background: #ffffff; -moz-border-radius:8px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:12px;padding: 3px 5px; text-align:left;}

3. Cari kode </head> kemudian paste kode berikut tepat diatasnya :

<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>

4. Simpan template dan masuklah ke menu elemen laman
5. Tambah gadget >>> html/javascript
6. Paste script berikut :

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>JUDUL 1</a>
<a>JUDUL 2</a>
<a>JUDUL 3</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
SCRIPT WIDGET 1
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
SCRIPT WIDGET 2
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
SCRIPT WIDGET 3
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

7. Simpan

:: UNTUK TULISAN BERWARNA MERAH GANTI DENGAN JUDUL TAB YANG DIINGINKAN ::

:: TULISAN WARNA BIRU GANTI DENGAN SCRIPT WIDGET YANG AKAN DIBUAT TAB VIEW ::