Tim Van Damme Inspired by Tim Vand Damme

Category List

Arsip Blog

Blog

Rabu, 29 Februari 2012

Cara Membuat Tab View yang Sederhana tapi Elegan

Cara Membuat Tab View yang Sederhana tapi Elegan

Sewaktu saya Chat Di Shoutmix. Luthfi  Meminta Diberikan Cara Membuat Tab View yang Sederhana tapi Elegan.Jadi Kali ini saya akan Menjawab Pertanyaan itu.Oleh karena itu Tutorial Blog/Trik Blog Kali ini KangTiar aka Mengulas "Cara Membuat Tab View yang Sederhana tapi Elegan". Di BLog KangTiar Cara ini Digunakan Untuk Mengganti Buku Tamu.yang ini Low...

Langsung saja ya...buatnya.
Kita lihat langkah pertama:
1. Login > Layout/tata Letak > Edit HTML
2. Cek Expand Template Widget
3. Paste-kan kode berikut di atas kode </head>
<script src='http://die-silver.googlecode.com/files/ardi33tabviewv2.js' type='text/javascript'/>

4. Kalau sudah, letakkan kode berikut 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;}

5. Klik Simpan perubahan dan Sekarang menuju ke Elemen halaman
6. Klik Tombol Add gadget > HTML/Javascript
7. Letakkan kode berikut dalam content:
<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 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">tabardi33_name('Tabardi33');</script>

Perhatikan tulisan yg berwarna:
Hijau   : Judul Tab
Merah : Isi untuk masing-masing tab

8. SIMPAN
Semoga Artikel Cara Membuat Tab View yang Sederhana tapi Elegan bisa bermanfaat bagi para Blogger.

1 komentar:

Santri Tuleen mengatakan...

oke banget artikelnya Sob.......udah aku coba.....
kalau gak keberatan mari tukar link
http://alam-berzdikir.blogspot.com/

Posting Komentar

About me

Visitors

free counters print this page Print This Page IP Get snow effect
--> br/>
.

mochamad fajar Design by Insight © 2009

Login to Facebook
Join ashtho software easy in Facebook!