Cara Membuat Menu TabView dengan JQuery

Cara Membuat Menu TabView dengan JQuery - TabView pada blog sering digunakan untuk menghemat ruang untuk menampilkan widget, disamping itu tabview juga akan memberi kesan cantik jika dipoles dengan menu tabview yang menarik, nah kali ini saya akan memberikan tutorial tentang cara membuat menu tabview dengan jQuery di blog. Tabview pada blog yang satu ini berbeda dengan tabview yang lainya, karena dengan menggunakan script ini, maka beberapa widget kamu akan secara otomatis adi menu di tabview, untuk lebih jelasnya silahkan lihat gambar dibawah ini dulu!

Cara Membuat Menu TabView dengan JQuery 

Yang pertama yang bertuliskan kode disini adalah script tabview yang kamu pasang, dan tab 1,tab 2, dan tab 3 adalah widget kamu yang otomatis membentuk tabview, praktis kan? nah, bagaimana membuatnya? ikuti langkah-langkah di bawah ini!

• Login ke blogger 
• Klik rancagan atau design
• klik edit html
• expand template sobat dengan memberi centang di kotak pojok template editor sobat.
• cari kode </head> dan letakkan kode berikut di atas kode </head>

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

• Sekarang sobat tambahkan widget baru, letakkan paling atas dari beberapa widget yang akan sobat jadikan tabview seperti penjelasan dan gambar diatas, copy dan paste kode berikut!

<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://ayriyzone.googlecode.com/files/SimpleTabViewJQuery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

• Lalu simpan.

Cara Membuat Menu TabView dengan JQuery

silahkan letakkan 3 widget dibawah widget kode tabwiew diatas, dan lihat hasilnya, maka 3 widget dibawahnya akan terkumpul secara otomatis, nah demikian tutorial singkat tentang cara membuat menu tabview dengan jQuery, semoga bermanfaat dan selamat mencoba! Baca Juga :  Memasang tag permalink dibawah postingan