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.

5 comments:

Nadiaafarhanaa said...

kenapa tak jadi ehh? :)

Unknown said...

Tak jadi ker? Kod apa yang kluar?

Nadiaafarhanaa said...

tak keluar apa2.. ada limit template apa yang boleh guna ke?

Unknown said...

Limit 4, tapi utk k'kemasan blog, btter guna 2 0r 3 jak.

Nadiaafarhanaa said...

saya dah try..tapi tak muncul :) thanks share