Trik Membuat Menu Tabview Dengan jQuery

Pertama saya ingin mengucapkan selamat liburan dan selamat natal nich buat Sobat Kumpulan HTML Blog™ semua..hehehe....
Kali ini saya akan share bagaimana Trik Membuat Menu Tabview Dengan jQuery,Dan berikut screen shootnya sob:


Dan berikut ini adalah tutorial pemasangannya sob:
1. Seperti biasa sobat Login ke akun blogger sobat dulu
2. Klik Rancangan/TEMPLATE
3. Lalu Klik Edit HTML
4. Kemudian Centang dulu tulisan Expand template sobat .
5. Tekan CTRL+F untuk mencari kode </head>
6. Copy kode dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 

7. Jika sudah selesai SIMPAN Template sobat
8. Kemudian pilih Tab TATA LETAK-TAMBAH GADGET,Kemudian copy kode dibawah dan paste didalam gadgetnya,inget gak usah dikasi judul sob...

<style type="text/css">
.blogtabs {padding: 0px !important;border: 0 solid #bbb;}
.blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #e0e0e0;cursor:pointer;}
html .blogtabs h2.active {background: #fff;}
.blogtabs .widget-content {border: 1px solid #bbb;padding: 10px;background: #fff;clear:both;margin:0;}
.btab, #showtabs {display:none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>
 9. Klik Simpan/Save dan sobat tinggal lihat hasilnya.

*Trik ini udah saya coba dan 100%work....
Previous
Next Post »

Silahkan berkomentar dengan sopan dan sewajarnya... ConversionConversion EmoticonEmoticon

Thanks for your comment