Cara Membuat Menu Tab View Otomatis

608 views

Membuat Menu TabView dengan JQueryMenu Tab View tanpa Edit HTML. Tentu sudah tahu kan yang dinamakan menu tab view? Widget pada sidebar yang berupa beberapa widget berbentuk menu menyamping. Menu tab view biasanya digunakan untuk menghemat ruang pada sidebar. Disini Blogger Gubug akan menjelaskan bagaimana cara membuat menu tab view otomatis dengan jquery.

Keunggulan menu tabview dengan JQuery sendiri yakni lebih simple dan praktis, selain tanpa edit html/ templates serta pengisiannya masing-masing menu tabview menggunakan 1 widget. Sangat mudah sekali dalam pengeditan isi menu tab view dan cocok untuk orang awam sekalipun seperti saya 😀

Jadi anda 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.

menu tabview tanpa edit html

Cara Membuat Menu Tab View Otomatis tanpa Edit HTML

1. Login ke akun blogger
2. masuk menu Tata letak
3. tambahkan gadget > HTML/JavaScript
4. Copy kode berikut

<style type=”text/css”>
.blogtabs {padding: 0px !important;border: 1px 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://bloggergubug.googlecode.com/files/tabviewjquery.js”></script><script type=”text/javascript”>$(document).ready(function() {$(‘#showtabs’).simpleBlogTab ({organictabs: 3});});</script><div id=”showtabs”></div>

4. Simpan tanpa diberi judul

Untuk jumlah tab bisa disesuaikan, ganti angka yang berwarna merah dan untuk style nya silahkan sesuaikan dengan keinginan anda. Ok selamat mencoba Membuat Menu Tab View Otomatis  😉

Hosting Unlimited Indonesia