Monday, 9 July 2012

Tutorial : Tabbed content widget

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




4 comments:

Nur Adilla Shahirah said...

tak jadi la. bila dah letak code dia tak jadi. pleasee tolong :(

S A N D R A said...

@Nur Adilla Shahirah
x jadi? sis pakai template apa ? warna,border dan jumlah tab yg mau d gabungkan je yang bole tukar kod . yang lain x pya kacau :)

✗ ⓕⓘⓕⓘⓨ ⓕⓘⓣⓡⓘⓐⓝⓘⓔ ✗ said...

jadi pun. Thanks Sandra :D

Joanna Yunus said...

pakai simple template tak jadi le