Cara Membuat Menu TabView dengan JQuery

Tweet

Setelah gw membuat menu multi tab kemarin

kali ini saya bagikan,pada galauvers, membuat multi TabView pada blog namun dengan Jquery. Membuat tab view dengan Jquery lebih mudah ngga seperti membuat tab view yang kemarin saya bagikan itu.

Tabview pada blog yang satu ini berbeda dengan tabview yang lainya, karena dengan menggunakan script ini, maka beberapa widget kamu akan secara otomatis ada di menu  tabview, Perhatikan  gambar dibawah ini dulu!

  

Pada bagian yang bertuliskan HTML/JavaScript,disitulah nanti sobat pasang kode scriptnya.Pada Tulisan Terpopuler,Kategori, Terkomentari,itu adalah menu-menu yang nantinya akan membentuk Tabview.Untuk lebih jelas dalam pembuatannya, ikuti langkah-langkah berikut ini:

1. Login ke blogger kamu
2. Klik rancangan atau design
3. Klik edit html
4. Expand template kamu dengan memberi centang di kotak pojok template editor kamu.
5. 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'/>
   
    
   
6. 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://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js"></script>
   <script type="text/javascript">
   $(document).ready(function() {
   $('#showtabs').simpleBlogTab ({organictabs: 3});
   });
   </script>
   <div id="showtabs"></div>
   
   
   
7. Lalu simpan. 

Perhatikan 3 widget dibawah widget kode tabwiew pada gambar diatas, dan lihat hasilnya, maka 3 widget akan terkumpul secara otomatis.

jika belum jelas atau agan masi merasa rumit klik Contact the Admin  (Di atas)