TUTORIAL - TABBER WIDGET

Assalamualaikum...
Credit buat Syida yang sudi memberi tunjuk ajar dekat aku. hehe. thanks again dear. So harini aku berhasil untuk share dengan korang tutorial nak buat tabber widget. Berkurun lama aku cuba follow tutorial orang yang handal-handal. Ternyata aku gagal. hahaha. Nasib baik syida ni baikkkk orangnya tau (^____^)
sheila shahfiekry
* Layout >> Add a gadget >> copy kod dibawah ini
* tabCount : 3 , adalah sebanyak mana korang nak tambah widget kat situ.

<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: 3px 5px;
     border: 1px solid #bbb;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #E3F3E9;
     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: #fffffff;
     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>

Macam contoh yang aku buat, tabCount tu aku bubuh 3 je. So kita kena drag 3 widget yang nak digabungkan contohnya : followers + bloglist + top commentator. Make sure preview dulu baru save okey. Kalau tak menjadi tanya aku ataupun Cik Syida ya :)

24 comments:

  1. ala pandainya. mmg failed la akak kalau bab coding2 ni. hahaha! thanks for sharing anyway!

    ReplyDelete
    Replies
    1. heee my pleasure kak suria. hihihi. kita pun tak reti gak. orang yang buatkan. kita sharing je :)

      Delete
  2. akak failed pastu suruh org buatkan..tapi hasil nye memuaskan hehehe tak puaeh hati lagi

    ReplyDelete
    Replies
    1. hehehe chaiyok2 kak. hehe. sheila pun tak puas hati kalau takleh nak buat sendiri. hee3

      Delete
  3. salam, aina menang satu GA and aina dapat review dari akak . ni link blog yang aina menang, blogmenang.blogspot.com . akak tolong tukar and review blog ni eh http://kisahgadisketawa.blogspot.com/ :) thanks :)

    ReplyDelete
    Replies
    1. salam aina. nantikan review hari jumaat ni keluar ye. insyallah, akak akan komen sikit mana yang aina perlu ubah ye. btw, aina nak akak review blog aina yang lagi satu ek? okey dear :)

      Delete
  4. ida buat ni tapi untuk post archive jee.. sbb banyak nau post. hehehhee

    ReplyDelete
  5. tahniah n tq for sharing

    ReplyDelete
  6. Thanks for sharing ye..akan di cuba bila lisa bkak letop nnti..hee..menarikkk..

    ReplyDelete
    Replies
    1. my pleasure lisa sheila. hahahha. kalau menjadi bagitau ye. hihiihi :)

      Delete
  7. Replies
    1. aik? bukan mak dah pernah buat ke tabber widget ni? hehehe

      Delete
  8. tq share yer dik!

    ReplyDelete
  9. thank u sheila. dulu namee nk buat tapi ikut tutorial tak jadi jeee. pastu give up ! hehe. blog namee buruk kemain skang. taktahu nak buat apa dah. hehe

    ReplyDelete
    Replies
    1. my pleasure namee sayang! heee. tk jadi mungkin sebab blog banyak bertukar2 editing kot. kalau namee nak cuba buat, sheila ada buat banyak tutorial. cer cuba dulu. blog awak tak buruk la cuma tak kemas je. hehehe ;p

      Delete
  10. terus terang akak cakap, biasanya bab2 ni akak selalu tak menjadi. sobs.

    ReplyDelete
    Replies
    1. hahahahah buat slow2 kak maria. insyallah boleh punya. jangan give up ya :)

      Delete
  11. kalau untuk blogskin memang tak boleh eh ?

    ReplyDelete