Membuat Menu TabView dengan JQuery

Keunggulan menu tabview dengan JQuery sendiri yakni lebih simple dan praktis, selain tanpa edit templates, pengisian masing-masing menu tabview menggunakan 1 widget, so sangat mudah sekali untuk orang awam sekalipun seperti saya

Jadi begini sobat cukup menambahkan widget html, dan meng copy kode menu tabview. Nantinya 3 widget dibawah widget tabview tersebut akan menjadi isi dari menu tabview. Logikanya seperti gambar berikut.

Bagaimana tertarik? Lanjut 

Membuat Menu TabView dengan JQuery

1. Seperti biasa login dulu ke akun blogger kamu
2. Masuk ke Rancangan dan Tambahkan widget HTML/JavaScript
3. Copy 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://naughtyric.googlecode.com/files/SimpleTabViewJQuery.js"></script>  <script type="text/javascript">  $(document).ready(function() {  $('#showtabs').simpleBlogTab ({organictabs: 3});  });  </script>  <div id="showtabs"></div>

4. Save

Untuk jumlah tab bisa disesuaikan, silahkan ganti angka yang berwarna merah dan untuk style nya silahkan sesuaikan dengan blog sobat,hehe,,,

Ok selamat mencoba Membuat Menu TabView dengan JQuery. Semoga Bermanfaat