 |
| Model Contoh |
Tab view versi 2 ini ceritanya adalah lanjutan dari tab view pendahulunya yakni hanya berbeda pada tampilannya. Pembuat aslinya adalah dari Ateonsoft.com dan disini saya hanya berbagi informasi sebagai pengguna tabview versi 2 ini Langsung saja Sobat ikuti langkah-langkah dibawah ini untuk dapat membuat tab view versi 2,OK
Berikut langkah-langkahnya:
Atau kunjungi Blog saya di Sini
- Login ke Blogger dengan ID kalian
- Lalu Klik Tata Letak
- Klik Sub Menu Edit HTML
- Pada Kotak Edit HTML cari Kode ]]></b:skin>
- Lalu copy kode di bawah ini dan pastekan 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;}
- Lalu letakkan script dibawah ini tepat dibawah kode <head>
<script src='http://azizrhamadhan.googlecode.com/files/tabview2atensoft.js' type='text/javascript'/>
- Save Template
- Pergi ke halaman Element Halaman
- Klik Add Widget Element
- Pilih Menu HTML/Java Script
- Lalu Copy kan kode yang ada di bawah ini
<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 -->
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>
Setelah itu sobat bisa paste kan pada kolom Html/Javascript yang tersedia Pada Blog dan sekarang tinggal di Save dan disetting saja sesuai dengan keinginan Sobat sendiri,
NB:
Pada setiap kode html maupun script diatas dibagian warna, ukuran border, lebar, tinggi, dapat Sobat Dapat mengedit sesuai dengan keinginan para Sobat . Mungkin Sobat tidak perlu mengubahnya dahulu untuk melihat hasil defaultnya cukup lakukan langkah-langkah yang seperti diatas dan setelah melihat hasilnya dan berhasil, barulah Sobat bisa menyesuaikan semua yang ingin Sobat ubah. Selamat Mencoba ya!
Jangan Lupa Commentnya ya Sobat .
Tidak ada komentar:
Posting Komentar
Berikan Tanggapanmu Di Sini