hari ini saya nak ajar cara buat 3 tab widget..
1 Log in >> layout >> Add gadget >> pilih HTML dan masukkan kod2 dibawah ini..
<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #D93437; color: #ffffff }
div.TabTampil div.katedajay
{ clear: both; border: 1px solid #DDDDDD; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.katedajay div.dajay
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.katedajay div.dajay div.gaigai
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:0px solid #ffffff; border-right:1px solid #DDDDDD; border-top:1px solid #DDDDDD; border-bottom:0px solid #DDDDDD; float: left;
display: block; width: 98px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 13px; font-weight: 900; color: #DDDDDD; }
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Nama Tab1</a> <a>Nama Tab2</a> <a>Nama Tab3</a></div>
<div style="width: 300px; height: 300px;" class="katedajay">
<div class="dajay">
<div class="gaigai">
Area ini content bagi tab1
</div>
</div>
<div class="dajay">
<div class="gaigai">
Area ini content bagi tab2
</div>
</div>
<div class="dajay">
<div class="gaigai">
Area ini content bagi tab3
</div>
</div>
</div>
</div></form>
<script style="text/javascript" src="http://sites.google.com/site/iamsuraclub/3tabwidget.txt?attredirects=0&d=1"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
sekarang kamu boleh tukar tulisan yang berwarna tu..
merah = kamu boleh tukar mengikut kehendak warna yang kamu mahukan kodnya disini .
biru = tukar dengan apa2 sahaja benda yang anda nak masukkan..
bila dah siap semua, save dan lihatlah hasilnya..semoga berjaya..terima kasih.. :)
1 Log in >> layout >> Add gadget >> pilih HTML dan masukkan kod2 dibawah ini..
<style type="text/css">
div.TabTampil div.TTs
{height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
{ background-color: #D93437; color: #ffffff }
div.TabTampil div.katedajay
{ clear: both; border: 1px solid #DDDDDD; overflow: hidden; background-color: #ffffff;}
div.TabTampil div.katedajay div.dajay
{ height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.katedajay div.dajay div.gaigai
{ padding: 3px 5px; }
div.TabTampil div.TTs a
{ border-left:0px solid #ffffff; border-right:1px solid #DDDDDD; border-top:1px solid #DDDDDD; border-bottom:0px solid #DDDDDD; float: left;
display: block; width: 98px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif;
font-size: 13px; font-weight: 900; color: #DDDDDD; }
</style>
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 300px;" class="TTs"> <a>Nama Tab1</a> <a>Nama Tab2</a> <a>Nama Tab3</a></div>
<div style="width: 300px; height: 300px;" class="katedajay">
<div class="dajay">
<div class="gaigai">
Area ini content bagi tab1
</div>
</div>
<div class="dajay">
<div class="gaigai">
Area ini content bagi tab2
</div>
</div>
<div class="dajay">
<div class="gaigai">
Area ini content bagi tab3
</div>
</div>
</div>
</div></form>
<script style="text/javascript" src="http://sites.google.com/site/iamsuraclub/3tabwidget.txt?attredirects=0&d=1"></script>
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
sekarang kamu boleh tukar tulisan yang berwarna tu..
merah = kamu boleh tukar mengikut kehendak warna yang kamu mahukan kodnya disini .
biru = tukar dengan apa2 sahaja benda yang anda nak masukkan..
bila dah siap semua, save dan lihatlah hasilnya..semoga berjaya..terima kasih.. :)
Comments