Cara Modifikasi Tab Menu VP 1

Posted by Tips Trick Blogger Sunday, February 20, 2011 0 comments

Sebelumnya ane sudah posting Cara Membuat Tab Menu Virtual Pagination. Posting Tersebut merupakan dasar pembuatan tab menu yang nantinya akan dikembangkan menjadi beberapa model tab menu. Kalau anda belum membacanya, ane sarankan kunjungi posting tersebut untuk mempermudah bahasan ini dan selanjutnya. Disamping itu ambil juga kode dasar dari tab menu virtual pagination di sana lalu pasang dulu di template anda, kemudian save template. Di sana juga ada petunjuk pemasangannya. Kalau sudah, saya anggap saudara sudah memasang kode dasar tab menu virtual pagination tersebut. OK kita lanjutkan bahasannya...

Posting kali ini ane akan share memodifikasi tab menu virtual pagination, artinya kita coba membuat tab menu dalam bentuk lain dari sebelumnya. Contohnya dapat anda lihat pada sidebar kanan dengan judul Perkakas. Silahkan kotak-katik dulu...Bagaimana???...anda tertarik??? Sekarang ikuti langkah pembuatannya.

Log in ke blog anda
Klik Rancangan

Pasang dulu kode dasar yang anda ambil tadi, kalau belum silahkan klik di sini. Saya anggap anda sudah memasang kode dasar tab menu virtual pagination tersebut
Klik Tambah Gadget

Pilih HTML/JavaScript

Pasang kode berikutke dalamnya

<h2>Atribut</h2>

<div id="gallerypaginate2" class="paginationstyle"></div>

<div style="width: 100%; height: 300px; overflow: auto;"> /* silahkan ganti tinggi kotak tampilan dengan mengganti angka 300px sesuai keinginan anda */

<div class="virtualpage hidepiece">
<h3>Sahabat</h3> /* silahkan ganti judul sesuai keinginan anda */
<p>
<ul>

<li><a href="http://anehunikgokil.blogspot.com/" target="new">aneh, unik, gokil</a></li>

<li><a href="http://ariawijaya.com/" target="new">ariawijaya</a></li> /* silahkan ganti link sahabat sesuai keinginan anda, atau mau masukkan tulisan dan kode html di sini juga gak masalah bro*/

</ul></p>
</div>

<div class="virtualpage hidepiece">
<h3>Links</h3>
<p>
<ul>

<li><a href="http://html-color-codes.info/" title="HTML color codes" target="new">color codes</a></li>

<li><a href="http://code.google.com/webfonts" title="google fonts" target="new">google fonts</a></li> /* silahkan ganti link sesuai keinginan anda, atau mau masukkan tulisan dan kode html di sini juga gak masalah bro*/

</ul></p>
</div>

<div class="virtualpage hidepiece">
<h3>Komentar</h3> /* silahkan ganti judul sesuai keinginan anda */
Masukkan tulisan atau kode di sini
</div>

<div class="virtualpage hidepiece">
<h3>Rank Analist</h3>
Masukkan tulisan atau kode di sini</div>
</div>

<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>


<script type="text/javascript">

var gallery=new virtualpaginate({
piececlass: "virtualpage", //class of container for each piece of content
piececontainer: 'div', //container element type (ie: "div", "p" etc)
pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc)
defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting.
wraparound: false,
persist: false //Remember last viewed page and recall it when user returns within a browser session?
})

gallery.buildpagination(["gallerypaginate", "gallerypaginate2"])

</script>

<hr style="margin-top: 35px; color: red" /> /* ini kode pembatas dengan garis merah kalau anda tidak menginginkannya, hapus saja gan */

Selanjutnya Simpan

Lihat hasilnya
Selamat mencoba dan Sukses selalu

Ini merupakan cara memodifikasi tab menu virtual pagination. Sebenarnya masih ada cara lain untuk menampilkannya dalam bentuk yang lain yang tidak kalah menarik. MAU....??? Tenang sahabat...tunggu posting selanjutnya. OH ya hapir lupa kalau virtual pagination ini dikeluarkan dan dikembangkan oleh dynamicdrive, makasih banyak sebelumnya...Ok Selamat Berjuang Sampai Titik DArah Penghabisan...MERDEKA

"keep spirits and do the best"

Adsense Content. bottom of article