Membuat Menu TabView dengan JQuery

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


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. Login ke blogger kamu
2. Klik rancagan atu 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 kamu tambahkan widget baru, letakkan paling atas dari beberapa widget yang akan kamu 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.
   

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, selamat mencoba!

Baca juga!

• Membuat menu tab view pada blogger
• Membuat Rocking Rolling Rounded Menu dengan JQuery dan CSS3
• Cara membuat menu pull down blogger

Terima kasih telah membaca artikel Membuat Menu TabView dengan JQuery.Silahkan baca artikel INFONETMU tentang tips blog yang lainya dibawah ini!

Comment With Facebook!