Ada kesalahan di dalam gadget ini

Absen Negara Masuk

free counters

Total Tayangan Laman

Selasa, 17 April 2012

Membuat Multi Tab Widget di gadget

1. Login ke Blogger, langsung meluncur ke Page Element (layout)
2. Pilih HTML / Javascript Widget
3. Kosongkan saja judulnya
4. Copy code dibawah ini


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

<!-- jangan dihapus bagian bawah ini, krn akan menyebabkan script tidak jalan -->
<div id='codeholder'><p>Get this <a href="http://andretauladan.blogspot.com/2012/01/tutorial-membuat-multi-tab-widget.html" target="_blank">widget</a> or <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank">click here</a></p></div>

4. Save, tempatkan widget ini di atas widget lain yang akan di-tab kan. Dengan begitu widget yang ada dibawahnya akan terbagi dalam tab.
  tabbed contents view elements
Untuk mengganti jumlah widget yang akan di-tab kan, ganti angka yang saya beri warna biru. Untuk mengganti background tab yang defaultnya putih, ganti code yang saya beri warna merah, dengan code warna yang diinginkan.
Tips ini saya ambil dari www.blogsentral.com, disusun dengan kalimat sedemikian rupa agar lebih mudah dimengerti.
SETELAH MEMBACA JANGAN LUPA KOMENYA GAN MINIMAL TINGGAL KAN JEJAK...SALAM BLOGER..

<-------------------------------------------------------------------------->