Hi There ^ ^
Tutor ni telah di request oleh
Nabila Medan. Mari tengok apa tu Tabbed Content Widget.
Widget ni boleh Save ruang untuk blog kita. Kalau nak buat, mari tengok step di bawah. sebelum tu, ikut step betul-betul ya sebab tutor ni boleh membingungkan anda. Hehehe :)
Step 1.
Design > Add a gadget > Html/Javascript
Step 2.
Copy kod di bawah ni dulu.
<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;}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>
Step 3.
Paste kan kod tu di ruangan Html/Javascript
Step 4.
Ubah kod yang diwarnakan mengikut kesesuaian kamu.
*** Warna widget colour,tab background dan bottom border
*** Jumlah widget yang mau di gabungkan.
Step 5.
Drag Tab widget yang tadi DI ATAS widget yang ingin digabungkan.
Contoh macam sandra punya Tabbed Widget ni:
***Ingat ! Setiap widget yang ingin di gabungkan mesti letak Tajuk/Nama. :)
Step 6.
Save :)
Harap kamu faham dengan tutor ni. First time buat tutor ni pun
memang bingung. Hahahaa :P