Membuat Menu TabView Dengan JQuery

          TabView pada blog sering digunakan untuk menghemat ruang untik menampilkan widget, disamping itu tabview juga akn 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 menjadi menu di tabview, untuk lebih jelasnya silahkan lihat gambar dibawah ini dulu!

          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!

1.) Masuk ke www.blogger.com untuk masuk ke halaman utama Blogger.

 

2.)Pada menu opsi lainnya, pilih template

3.) Setelah klik tulisan template, maka akan muncul halaman pengaturan template. Lalu klik edit HTML.

4.) Setelah klik edit HTML, maka akan muncul kotak dialog pengaturan HTML template. Lalu klik lanjutkan.

5.) Setelah klik Lanjutkan, maka akan muncul code HTML pada kotak tersebut. Sebelum mengedit kodenya, centang kotak Expand Template Widget terlebih dahulu..

6.) Setelah itu 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'/>

7.) Sekarang kamu tambahkan beberapa widget baru yang berupa text untuk judul tab 1, 2 dan 3 seperti gambar pertama

 8.) Kemudian kamu tambahkan widget HTML/Javascript baru, letakkan paling atas dari beberapa widget text yang kamu jadikan tabview seperti penjelasan dan gambar pertama.

 9.) Copy dan paste kode berikut pada kotak yang disediakan :

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

10.) Lalu klik simpan dan lihat hasilnya.

Keterangan --> Widget Text : kolom judul = nama tabview

                                                 kolom konten = isi tabview

                                                 berikanlah link pada isi tabview,
                                                 agar dapat menuju laman yang diinginkan saat di klik

                   --> Widget HTML/Javascript : ({organictabs: 3}); digunakan untuk 

                                                                      menentukan jumlah tabview