Blog Ubay

Sebelumnya aku sudah memposting gimana caranya bikin tab view menu secara sederhana (versi 1), nah dalam posting kali ini aku akan memberi tahu cara membuat tab view yang sedikit lebih bagus dan unik, namun pembuatannya tetap simpel dan mudah. Hasilnya bisa dilihat di sebelah kiri blogku ini/tab view punyaku ini. Tapi 1 kekurangannya, tab view ini memakai efek radius (lengkungan di tepi/sudut) dan hanya terlihat jelas efeknya jika dibuka melalui firefox. Namun, bisa diakali dengan menambahkan kode semisal
-webkit-border-radius:10px;

Kalau kalian tertarik silahkan ikuti panduan berikut :

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 ::