Cara Membuat Tab Menu Virtual Pagination

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<<<

<script src='http://bloekoetoek-blogonol.googlecode.com/files/virtualpaginate.js' type='text/javascript'> /* ada baiknya kode berwarna merah anda ganti dengan kode anda sendiri dengan menyimpan kode javascript di penyimpanan online anda sendiri, ambilk kodenya di sini. Kalau anda masih bingung cara menyimpan kodenya silahkan baca di sini */

</script>

<style type='text/css'>

.paginationstyle{
width: 250px;
text-align: center;
padding: 2px 0;
margin: 10px 0;
}

.paginationstyle select{
border: 1px solid navy;
margin: 0 15px;
}

.paginationstyle a{
padding: 0 5px;
text-decoration: none;
border: 1px solid black;
color: navy;
background-color: white;
}

.paginationstyle a:hover, .paginationstyle a.selected{
color: #000;
background-color: #FEE496;
}

.paginationstyle a.disabled, .paginationstyle a.disabled:hover{
background-color: white;
cursor: default;
color: #929292;
border-color: transparent;
}

.paginationstyle a.imglinks{
border: 0;
padding: 0;
}

.paginationstyle a.imglinks img{
vertical-align: bottom;
border: 0;
}

.paginationstyle a.imglinks a:hover{
background: none;
}

.paginationstyle .flatview a:hover, .paginationstyle .flatview a.selected{
color: #000;
background-color: yellow;
}

</style>

• 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