Cara Simple Membuat Menu Tab View V-2

Cara ini lebih gampang dari cara membuat menu tab view sebelumnya. Pada tutorial ini hanya memanfaatkan Kode jQuery Easy Organic tanpa harus meng-otak atik kode template dan gadget default blogger.

Carannya sangatlah simple, anda hanya mengcopy paste kode dibawah kedalam gadget blog dan meletakkan gadget tersebut diatas gadget yang akan dibuat menu tab view. Bingung gak? Ikuti aja langkahnya :

• Pilih Rancangan;
• Klik tab Tambahkan Elemen (Gadget);
• Pilih HTML/JavaScript;
• Copy paste kode dibawah kedalam HTML tersebut;
• Lalu Simpan;

<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://kang-onk.googlecode.com/files/TabViews-V2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#showtabs').simpleBlogTab ({organictabs: 3});
});
</script>
<div id="showtabs"></div>

Selanjutnya letakkan hasil gadget HTML yang baru dibuat diatas gadget-gadget yang akan dibuat menjadi menu tab view, seperti gambar berikut :

Dan Hasilnya :

Selamat Mencoba dan semoga berhasi, jangan lupa komentarnya untuk kemajuan blog ini. Trims