Tab Content Box

Salam =)

Seperti yang korang nampak gambar kat bawah ne, 2 / 3widget bergabung dalam 1 ruang. 

Cara ne memang berkesan utk jimatkan ruang kat blog korang tu.

Benda ne akan gabungkan about me, blog archieve dan fbox/cbox dalam 1 ruang.

Happy try yer ^^

1) Dashboard => Add Gadget => HTML/JavaScript

2) Copy kod ni :

<style type="text/css">.tabber { padding: 0px !important; border: 0 solid #bbb !important;}.tabber h2 { float: left; margin: 0 1px 0 0; font-size: 12px; padding:
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: # border: 1px solid #bbb; margin-bottom: -1px; /*--Pull tab down 1px--*/ overflow: hidden; position: relative; background: #e0e0e0; cursor:pointer; } html .tabber h2.active { background: # cursor:pointer;}html .tabber h2.active { background: #fff; border-bottom: 1px solid # border-bottom: 1px solid #fff; /*--"Connect" active tab to its content--*/ } .tabber .widget-content { border: 1px solid #bbb; padding: 10px; background: #}.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 ({
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">tabber widget</a></p></div>

Merah : Korang boleh ubah right @pun center.

Hijau : Boleh ubah ikut fevret kaler korang.

Biru : Tab tu pula, korang boleh pilih sama ada nak 2 tab ke, 3 tab ke..

Purple : Ubah ikut saiz yang korang mahu kan.

3) Preview dlu, okey ? Korang edit lah mana2 yg korang nak edit. 

4) Kalau dah puas hati, baru lah korang save. =)

---

tQ for your BIG smile here.

---