0 Cara Membuat Tab Content Dengan Mudah

Kali ini saya akan share Cara Membuat Tab Content yang simple dan tak perlu edit HTML yang menyebabkan error template kita dan anda juga harus secara manual dalam memasukkan isinya. Caranya cukup mudah dan penggunaannya pun cukup mudah yaitu kita tinggal tambahkan pada gadget template.

Langsung aja caranya :

1. Login ke akun Blog Anda
2. Klik Rancangan -- Elemen Halaman -- Add Gadget -- HTML/Java Script
3. Biarkan Judul Kosong
4. Copy code berikut dan paste :

<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px; /*--Pull tab down 1px--*/
overflow: hidden;
position: relative;
background: #e0e0e0;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #fff;
border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
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://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script>

<!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>Get this <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">widget</a></p></div>


- tabCount : 3 == untuk menambah jumlah tab content

5.  Posisi gadget HTML / Javascript di atas gadget yang ingin Anda tabify
   
   
   
6. Klik Save dan lihat blog anda

CATATAN

• Pastikan setiap Widget/gadget ada judulnya karena tabber tidak akan bekerja dengan baik tanpa judul
• Judul widget pendek saja
• Jangan lupa untuk menguji di Internet Explorer. Widget ini dapat menyebabkan "Operasi dibatalkan" kesalahan dalam IE untuk beberapa non-desainer template. Jika itu terjadi, widget ini bukan untuk Anda