Cara Membuat Tab Menu Virtual Pagination

Posted by Tips Trick Blogger Wednesday, February 16, 2011 0 comments

Tab menu merupakan sebuah penyajian menu secara singkat yang dirangkum dalam sebuah kotak viewer atau dialog konten untuk menampilkan beberapa pilihan menu dalam suatu blog. Tab menu juga berfungsi untuk meringkas beberapa tampilan dalam satu box konten yang kebanyakan dihubungkan dengan script tertentu untuk menmpilkankan beberapa pilihan, sehingga memudahkan para pengguna untuk mengakses suatu menu tertentu. Disamping itu tab menu juga berfungsi untuk menyingkat beberapa atribut blog dalam satu wadah yang nantinya akan ditampilkan secara bergantian dari satu tab ke tab lainnya. Kelebihan lainnya dapat dikatakan tab menu kali ini disertai dengan tampilan virtual sederhana sehingga terkesan nyentrik dan nakal hehehheeeee...Mungkin cara membuat tab menu virtual pagination ini hampir sama dengan tab menu lainnya, namun ane yakin tampilannya sedikit lebih nyentrik.....hehheheee lagi....untuk lebih gampangnya silahkan lihat contoh berikut cara pemasangannya di bawah ini.

Log in ke blog anda
Klik Rancangan

Klik Edit HTML/ JavaScript

Masukkan kode berikut sesudah kode ]]></b:skin >>>Catatan: Kode ini adalah kode dasarnya<<<

Simpan Termplate

Dari sini kjita dapat membuat beberapa modivikasi tab menu
Klik Rancangan lagi

Klik Tambah Gadget

Pilih HTML/JavaScript

Masukkan Kode berikut di dalamnya

<h2>DAFTAR ISI</h2>
<div style="width: 100%; height: 300px; overflow: auto;">
<div class="virtualpage4 hidepiece">
<h3>Aneh</h3> /* ganti dengan judul anda */
<p>
<ul>

<li><a href="http://blogonol.blogspot.com/2011/02/khayalan-tingkat-tinggi.html">Khayalan Tingkat Tinggi</a></li>

<li><a href="http://blogonol.blogspot.com/2011/01/misteri-di-balik-kartu.html">Rahsia Dibalik Kartu</a></li> /* ganti dengan link dan judul posting anda */

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

<div class="virtualpage4 hidepiece">
<h3>Unik</h3> /* ganti dengan judul anda */
<p>
<ul>

<li><a href="http://blogonol.blogspot.com/2011/01/owen-thor-walker-hacker-muda-yang.html">OWEN THOR WALKER: Hacker Muda yang Menjadi Konsultan Keamanan Dunia Cyber></a></li>

<li><a href="http://blogonol.blogspot.com/2011/01/10-dokumen-paling-rahasia-di-dunia.html">10 Dokumen Paling Rahasia di Dunia</a></li> /* ganti dengan link dan judul posting anda */

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

<div class="virtualpage4 hidepiece">
<h3>Lucu</h3> /* ganti dengan judul anda */
<p>
<ul>

<li><a href="http://blogonol.blogspot.com/2011/01/kumpulan-cerita-lucu.html">Kumpulan Cerita Lucu</a></li>

<li><a href="http://blogonol.blogspot.com/2010/12/cut-tari-masturbasi.html">Cut Tari Masturbasi</a></li> /* ganti dengan link dan judul posting anda */
</ul>
</p>
</div>

<div class="virtualpage4 hidepiece">
<h3>Seo</h3> /* ganti dengan judul anda */
<p>
<ul>

<li><a href="http://blogonol.blogspot.com/2010/12/kode-rahasia-seo-blogspot.html">Kode Rahasia Seo Blogspot</a></li>

<li><a href="http://blogonol.blogspot.com/2010/12/ajaran-sesat-mengenai-alexa-gila-bener.html">AJaran Sesat Mengenai Alexa | Gila bener (penting untuk direnungi)</a></li> /* ganti dengan link dan judul posting anda */

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

<div class="virtualpage4 hidepiece">
<h3>Blog Info</h3> /* ganti dengan judul anda */
<p>
<ul>

<li><a href="http://blogonol.blogspot.com/2011/02/cara-membuat-accordion-menu-untuk.html">Cara Membuat Accordion Menu Untuk Daftar Isi</a></li>

<li><a href="http://blogonol.blogspot.com/2011/02/cara-membuat-welcome-widget-dengan-efek.html">Cara Membuat Welcome Widget Dengan Efek Flashing Color</a></li> /* ganti dengan link dan judul posting anda */

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

</div>

<div id="galleryalt" class="paginationstyle" style="width: 100%; text-align: left">
<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(["galleryalt"], ["Aneh", "Unik", "Lucu", "Seo", "Blog Info"])

</script>
<hr style="margin-top: 35px; color: red" />

Selanjutnya Simpan

Jangan khawatir dengan besarnya widget ini, karena ini akan otomatis menyesuaikan dengan lebar sidebar anda, begitu juga dengan kolom lainnya
Lebih jelasnya contoh bisa anda lihat pada daftar isi blog ini
Ok selamat Mencoba dan Sukses Selalu

Lalu untuk modifikasi tab menu untuk tampilan lainnya bagaimana?...santai sahabat, tunggu posting selanjutnya....yyyyuuuuuhhhhuuuuuuuuu........

"keep spirits and do the best"

Adsense Content. bottom of article