Minggu, 25 April 2010

Membuat Tab View Di Blogspot Tampil Elegan

Oke, kembali lagi dalam trik blog. Kali ini saya akan mempublikasikan tentang pembuatan menu tabulasi untuk Anda. Ini juga dari dukungan Blogger-blogger sekalian. Hehe. Oke, langsung saja ya. Kita lihat langkah pertama:

1. Login > Layout/tata Letak > Edit HTML
2. Centang 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
Kuning : Isi Kode untuk masing-masing tab
8. jangan Lupa Disimpan 

Semoga Artikel Kali ini dapat bermanfaat bagi anda semua.[KangTiar]
Sumber:Ardi33 

Tag: Membuat Tab view,Cara Menbuat Tab View,Tab View Sederhana

6 komentar:

  1. Tambah berat kalo ditambahin tab segala. Tapi nice post deh...

    BalasHapus
  2. Kunjungi saya kang, afiliasi dapet dollar :)

    BalasHapus
  3. tutorial yang bermanfaat kawan,,lain kali ane praktekin ah...makasih ya

    BalasHapus
  4. ajib nih kang,
    boleh dong ya aku pasang.
    thks kang.
    salam kenal..

    BalasHapus