Cara Membuat Menu Tab View

Syalom.., Oke kita mulai pelajaran hari ini sob,, yaitu tentang membuat menu Tab Veiw, seperti milik saya. Posting ini saya buat karna template saya sangat sempit dan memiliki 2 side Bar sebelah kanan dan kiri dan loading Blog pun jadi agak lama loadingnya apabila saya banyak menaruh aplikasi widget di sebelah kiri-kanan posting. alhasil nantinya yang mau berkunjung ke blog ini keburu pindah ke lain hati untuk mencari artikel !!

Apabila sudah tidak sabar, Yuk kita mulai membuat tab view hari ini dan langka - langkahnya adalah sebagai berikut :

1. Masuk ke halaman Dashboard > Tata Letak > Edit HTML

2. Lakukanlah BackUp template, agar bisa mengembalikan template kesayangan Anda apabila terjadi eror.

3. Apabila sudah pada posisi Edit HTML carilah code ]]></b:skin>, dengan menggunaka 'F3' pada KeyBoard atau 'Ctr F' untuk mencari kode ]]></b:skin>.

4. Copy kode brikut lalu Paste tepat diatas kode ]]></b:skin>

/* 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:#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.Tabateonsoft 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.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:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;} 

KET :

• 12px
= Untuk Mengubah Ukuran Text pada TAB
•  #E8E8E8
= Untuk Merubah warna Tab setelah disorot cursor
•   #E8E8E8
= Unutk Mengubah warna TAB setelah di klik cursor
•  240px
= Untuk mengubah tinggi kotak TAB
•  11px
= Untuk mengubah ukuran text pada kotak TAB 
•  #EFF0F1
= Untuk mengubah warna background pada kotak kolom TAB.

5. Lalu Copy kode berikut dan letakan di bawah kode </head>

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

6. Simpan Template.

7. setelah mengikuti langkah diatas sekarang klik > Elemen Laman > Tambah Gadget > klik Add (Plus) Pilih HTML/JavaScript.

8. Copy paste kode berikut pada editor HTML/JavaScript :

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<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 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script> 

9. Klik Simpan dan lihat hasilnya.


Semoga bermanfaat, GBU.