Tab view berfungsi meletakkan link, gambar atau apapaun juga terserah selera. Keuntungannya adalah menghemat space sidebar maupun postingan dengan membaginya memiliki kamar sendiri-sendiri yang akan tampil saat tombol tab di klik. Banyak sekali sebenarnya cara membuat tab view dan salah satunya dibawah ini.bagi yang berkenan silahkan ikuti langkah-langkah di bawah ini
- Log in dulu ke blog anda
- kemudian klik tata letak
- klik Edit HTML
- cari kode <head>
- kemudian copy paste kode di bawah ini persis di bawa kode <head>
<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/> - kemudian cari kode ]]></b:skin>
- Letakkan kode dibawah ini persis 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;}
- kemudian simpan.
- Kalau sudah disimpan templatenya tinggal memasang tabnya di elemen halaman, dengan menambah widget baru dan pilih html/javascript lalu masukkan kode dibawah 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 -->
<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> - Simpan dan jangan lupa masukkan kode script yang ingin anda tampilkan di teks yang berwarna merah
- Sekarang liat hasilnya
Selamat Mencoba......
Cara membuat tab view di blogspot, cara menambah gadget tab view pada blog, tutor membuat tab view di blog, langkah mudah membuat tab view di blogger.
Hubungi Kami: J_Putra
Email: jptr273@gmail.com
Dapat ilmu baru lagi
keren nih info nya aku mau tes dulu ya kang makasih
sip kANG jempolaaann
nice post.!
aku sudah coba, tapi masih belum sesuai harapan, apakah ada yang kurang?
terima kasih
wah,,, nice info sobt.... thanks banget yah....
mantabz
perlu di coba neh
thaks :)
tambah mantab aja nih ilmu blog abang
hhii
nice post mas, jadi pengen masang nihhh
yang ini yang mantap
kang...
udah pasang..
tapi,, masih bingung cara ngisi tabnya.. gimana??
bisa diisi posting ga???
kumaha kang cara ngisi tabnya ?
gan, cara ngisi tab view tu gimana, maksud kalimat Disini letakkan kode untuk tab 1 anda apa gan, ane newbie banget gan