Membuat Widget Tab flipping Menggunakan jQuery

 Membuat Widget Tab flipping Menggunakan jQuery, ini adalah salah satu widget tab view jQuery yang banyak direquest oleh blogger .
Untuk Membuatnya Berikut adalah tutorialnya :
Masuk ke akun Blogger, ke Design pilih tab Edit HTML,
Masukkan kode berikut diatas kode </head>
<script type="text/javascript" src="http://dl.dropbox.com/u/34111559/jquery.quickflip.js" ></script><script type="text/javascript" >$('document').ready(function(){$('#flip-container').quickFlip();$('#flip-navigation li a').each(function(){$(this).click(function(){$('#flip-navigation li').each(function(){$(this).removeClass('selected');});$(this).parent().addClass('selected');var flipid=$(this).attr('id').substr(4);$('#flip-container').quickFlipper('', flipid, 1);return false;});});});</script>

Keterangan untuk JS'nya bisa Anda edit kecepatanya, modifikasi pada kode quickFlipper misanya di modifikasi seperti berikut ini :

quickflipper({ openSpeed:200, closeSpeed:250 }, flipid, 1);

Kemudian masukkan CSS berikut tepat diatas kode ]]></b:skin>

#flip-tabs{
    width:300px;
    margin:20px auto; position:relative;
}
#flip-navigation{
    margin:0 0 10px; padding:0;
    list-style:none;
}
#flip-navigation li{
    display:inline;
}
#flip-navigation li a{
    text-decoration:none; padding:10px;
    margin-right:0px;
    background:#f9f9f9;
    color:#333; outline:none;
    font-family:Arial; font-size:12px; text-transform:uppercase;
}
#flip-navigation li a:hover{
    background:#999;
    color:#f0f0f0;
}
#flip-navigation li.selected a{
    background:#999;
    color:#f0f0f0;
}
#flip-container{
    width:300px;
    font-family:Arial; font-size:13px;
}
#flip-container div{
    background:#fff;
}
#flip-container div ul{
    background:#f9f9f9;
    border:1px solid #f0f0f0;
    margin:0; padding:15px 5px;
    list-style-position:inside;
}
#flip-container div ul li{
    padding:5px 0;
}
#flip-container div ul.orange{ background:#f9d999; }
#flip-container div ul.green{ background:#d9f9d9; }
#flip-container div ul.blue{ background:#c9d9f9 }


Kode CSS bisa Anda ganti dengan selera Anda oke!

Kalau sudah klik Save Template

Setelah itu ke tab Page Element, Add New Gadget (tambah gadget) pilih HTML/JavaScript dan masukkan kode HTML berikut :

<div id="flip-tabs" ><ul id="flip-navigation" >
<li class="selected"><a href="#" id="tab-0"  >Pertama</a></li>
<li><a href="#" id="tab-1" >Kedua</a></li>
<li><a href="#" id="tab-2" >Ketiga</a></li></ul>
<div id="flip-container" ><div>
<ul>
<li>Konten pertama Anda disini</li>
<li>Contoh text aja lah</li>
<li>Link Juga bisa</li>      
</ul>
</div>
<div><ul>
<li>Konten Kedua Anda disini</li>
<li>Contoh text aja lah</li>
<li>Link Juga bisa</li>                  
</ul>
</div>
<div><ul>
<li>Konten Ketiga Anda disini</li>
<li>Contoh text aja lah</li>
<li>Link Juga bisa</li>
</ul>
</div>
</div>
</div>


Silahkan Edit Isi tabnya sesuai keinginan Anda kemudian Klik Save lihat hasilnya....