Tips : Membuat tab view

Merasa binggung menempatkan data ke blog anda....ini ada sedikit berbagai ilmu..ini saya peroleh dari mas ardi
ini contoh hasilnya:

cara nya gampang koq

# Login > Layout/tata Letak > Edit HTML
# Cek Expand Template Widget
# Paste-kan kode berikut di atas kode </head>

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

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;}

1. Klik Simpan perubahan dan Sekarang menuju ke Elemen halaman
2. Klik Tombol Add gadget > HTML/Javascript
3. Letakkan kode berikut dalam content:
   

<form action="tabardi33.html" method="get">
<div id="Tabardi33" class="Tabardi33">
<div class="TFs">
<a>Trik Blog</a>
<a>Kumpul Blogger</a>
<a>Link Box</a>
<a>Download</a>
</div>
<div class="Pages">

<div class="Page"><!-- Tab -->
<div class="floor">
<br/><ul><li><a href="link anda">nama file anda</a></li></ul>
</div><!-- end Tab -->

<div class="Page"><!-- Tab -->
<div class="floor">
<br/><ul><li><a href="link anda">nama file anda</a></li></ul>
</div><!-- end Tab -->

<div class="Page"><!-- Tab -->
<div class="floor">
<br/><ul><li><a href="link anda">nama file anda</a></li></ul>
</div><!-- end Tab -->

<div class="Page"><!-- Tab -->
<div class="floor">
<br/><ul><li><a href="link anda">nama file anda</a></li></ul>
</div><!-- end Tab -->

</div>
</div>
</form>
<script type="text/javascript">tabardi33_name('Tabardi33');</script>

Perhatikan tulisan yg berwarna:

• Merah : Judul Tab
• Biru dan ungu : Isi (link dan nama file) untuk masing-masing tab

selamat mencoba ya semoga berhasil ya

hai sobat ayo gabung di facebook blog ini bersama dengan ribuan sahabat lain

Artikel Terkait: