Pembuatan Tab View terdiri dari Javascript, CSS, dan HTML.Download Javascript disini.
Download CSS disini.
Silahkan simpan ditempat hosting file sendiri. Untuk pengguna blogspot bisa simpan di Google Sites, gratis.
Bila sudah, menuju ke Tata Letak, lalu Edit HTML, lalu tempatkan pas dibawah kode head seperti ini :
<head>
<link href='http://sites.google.com/site/webcodesite/menu-code/tabview.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/site/webcodesite/menu-code/tabview.js' type='text/javascript'>
//Tab View script- By Ilya Lyubinskiy (http://www.php-development.ru)
//Script featured and available at JavaScriptKit.com (http://www.javascriptkit.com)
</script>
Catatan : Warna pink adalah alamat URL dimana saya menyimpan javascript dan css tab view tersebut. Tolong diganti dengan URL sendiri. Mengapa? Bisa saja itu digunakan tapi khawatir ketika saya ada perbaikan di Google Site, lalu link itu terhapus maka berpengaruh semua yang mengelink kesitu akan kacau tampilan tab viewnya. Karena sumber linknya sudah hilang.
Selanjutnya, simpan perubahan. Sekarang menuju ke "Tata Letak", lalu "Tambah Gadget", dan pilih "HTML/Javascript". Lalu paste HTMLnya (catatan : Ini tabview dua kolom untuk yang lebar sidebar blog kurang dari 300px. Untuk sidebar lebih dari 300px, bisa digunakan kolom ketiganya) :
|
Catatan : Ini untuk Tab View dua kolom, bila ingin tiga kolom, tambahkan kode :
<div class="Tabs" style="width: 220px;">
<a>Tips Blog</a>
<a>Islam</a>
</div>
Menjadi :
<div class="Tabs" style="width: 320px;">
<a>Tips Blog</a>
<a>Islam</a>
<a>Menu ketiga</a>
</div>
Width desesuaikan dengan sidebar, HTML menu ketiga :
<!-- *** Page3 Start *** -->
Isi seperti kesatu dan kedua
<!-- *** Page3 End ***** -->
No comments:
Post a Comment