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>
</div>
<div class="virtualpage hidepiece">
<h3>Links</h3>
<p>
<ul>
</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>
<!-- Initialize Demo 1 -->
<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>
<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>
<!-- Initialize Demo 1 -->
<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"