Cara Modifikasi Tab Menu VP 2

Posted by Tips Trick Blogger Saturday, February 19, 2011 0 comments

Posting kali ini ane berbagi tentang bagaimana cara modifikasi tab menu virtual pagination untuk wadah image atau gambar. Sebenarnya cara pembuatannya sama dengan cara membuat tab menu virtual pagination script pada posting sebelumnya. Saya sarankan bagi yang belum membacanya untuk mengakses posting tersebut agar tidak membingungkan, karena saya tidak menjelaskannya dari awal lagi. Posting ini hanya lanjutan, jadi sebaiknya baca dulu posting sebelumnya tentang cara membuat tab menu virtual pagination, karena di sana anda akan mendapat script dasar yang harus anda pasang di template anda dan nantinya akan kita modifikasi menjadi beberapa model tab menu. Silahkan akses di sini. Kalau sebelumnya anda sudah memasang script dasar Tab view virtual vagination, kita tinggal lanjutkan kelangkah modifikasi. Sekarang kita mulai saja bro...ikuti langkah di bawah ini.

Log in ke blog anda
Klik Rancangan
Klik Tambah Gadget
Pilih HTML/JavaScript
Saya anggap anda sudah memang script dasar tab menu virtual pagination di template anda sebelumnya
Masukkan kode berikut ke dalamnya

<h3>TabMenu untuk Gambar</h3> /*silahkan ganti dengan judul anda */

<div style="width: 300px; height: 230px;"> /* width ukuran lebar dan height ukuran tinggi, silahkan sesuaikan sesuai kolom anda */

<div class="virtualpage4 hidepiece">
<img src="http://img25.imageshack.us/img25/8442/castlei.gif" /> /* alamat gambar 1 ganti dengan alamat gambar anda */
</div>

<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/7907/streetkz4.gif" /> /* alamat gambar 2 ganti dengan alamat gambar anda */
</div>

<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/8538/weedjh8.gif" /> /* alamat gambar 3 ganti dengan alamat gambar anda */
</div>

<div class="virtualpage4 hidepiece">
<img src="http://img201.imageshack.us/img201/6923/countryxb6.gif" /> /* alamat gambar 4 ganti dengan alamat gambar anda */
</div>

</div>

<div id="galleryalt" class="paginationstyle" style="width: 300px; text-align: left"> /* lebar button channel di bawah gambar, silahkan ganti 300px dengan 100% kalau anda ingin menyesuaikan dengan kolom anda secara otomatis */
<a href="#" rel="previous"><</a> <span class="flatview"></span> <a href="#" rel="next">></a>
</div>

<script type="text/javascript">

var gallery4=new virtualpaginate({
piececlass: "virtualpage4",
piececontainer: 'div',
pieces_per_page: 1,
defaultpage: 0,
wraparound: false,
persist: true
})

gallery4.buildpagination(["Judul 1"], ["Judul 2", "Judul 3", "Judul 4", "Judul 5"]) /* nama gambar ganti dengan nama gambar anda */

</script>

<hr style="margin-top: 35px; color: red" /> /* kode garis penutup warna merah dibagian bawah. hapus saja bila anda tidak memerlukannya */