Cara Membuat Menu TabView Di Blog

Cara Membuat Menu TabView Di Blog

Cara membuat Menu TabView di blog memang sangat mudah. Menu Tab View ini sebenarnya diadaptasi dari Worpress. Dengan ukuran yang kecil, Menu Tab View dapat menghemat banyak tempat dan bisa memuat banyak ruang. Selain menghemat tempat, Menu Tab View juga berguna untuk mempercantik tampilan blog.

OK, jadi kali ini saya akan bahas 2 model untuk membuat menu Tab View..

1. Cara Membuat Menu Tab View Di Blog

Menu Tab View yang akan kita bahas kali ini adalah yang memakai JQuery, pemasangannya pun sangat simple dan praktis, tanpa edit HTML template yang membingungkan para pemula. Anda cukup menambah satu widget untuk dipasang kode Menu Tab View ini.

Logika pemasangan Menu Tab View itu seperti ini. Tiga widget yang berada dibawah kode Menu Tab View akan menjadi isi dari Tab.

OK, jadi mari kita bahas cara membuatnya..

• Login ke akun Blogger anda
• Masuk ke menu Tata Letak
• Silahkan klik Tambah Gadget, kemudian pilih HTML/Java Script
• Masukkan kode dibawah ini

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

• Klik Simpan tanpa diberi nama
• Untuk mengisi Tab, silahkan letakkan widget yang akan dijadikan Tab dibawah widget yang memakai kode diatas tadi.
• Anda juga bisa mengatur jumlah Tab dengan mengubah angka yang diberi background warna kuning, silahkan ubah angka 3 dengan jumlah Tab sesuka anda.

Untuk tinggi, lebar, warna, dan lain-lain, silahkan sesuaikan sendiri dengan keinginan anda.

source