Isnin, 11 Februari 2013

Tutorial: Cara Buat Tabber Widget (Gabungkan Widget)

Ramai yang bertanya bagaimana untuk menghasilkan tabber widget macam di sidebar blog ibu ini. Fungsi utama Tabber Widget ini adalah untuk menjimatkan ruang di sidebar blog. Jadi, blog nampak lebih kemas. Ibu mohon maaf kerana baru sekarang berkesempatan buatkan tutorial yang berkaitan. 

Cara Buat Tabber Widget (Gabungkan Widget)

1. Sediakan dulu widget-widget yang ingin digabungkan. 

2. Kemudian pergi ke Dashboard - Layout - Add A Gadget - HTML/Java Script. (Pastikan ruangan title dibiarkan kosong/ tanpa tajuk).  

3. Copy code di bawah dan paste ke ruangan HTML.

<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: #ffffff;
     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>
  • Biru untuk warna background
  • Merah untuk warna sidebar
  • Hijau untuk jumlah tab yang ingin digabung
# Pilihan warna ada di SINI
4. Balik ke layout, seret/letak widget HTML yang telah dimasukkan code betul-betul di atas susunan widget yang ingin digabungkan.

5.  Siap..

Kredit: Bloggersentral.com

14 ulasan:

  1. terima kasih kerana berkongsi tutorial ini. blog saya juga menggunakan tabber widget ni. nampak kemas bila 5 widget digabungkan sekali.

    BalasPadam
  2. selamat bertutorial,masa mula2 buat blog dulu dh khatam semua ni.tp skang byk juga yg dh lupa..:)

    BalasPadam
  3. gabungkan widget memang akan nampak lebih kemas... taklah serabut kat sidebar...

    BalasPadam
  4. Slm....bgs la tutorial ni..harus but...Ibu jgn lupe follow sy Bali ye....

    BalasPadam
  5. nape ina buat x jadi ye ibu..

    BalasPadam
  6. bagus tutorial ni...boleh try ni nanti...

    BalasPadam
  7. ramai org wat..bgus sebb jimatkan ruang

    BalasPadam
  8. terima kasih tutorial ini..saya nak cuba buat..
    oh ya..ibu, saya nak tanya mcmna nak buat bloglist letak atas tu..

    BalasPadam
  9. boleh cuba nie .... terima kasih ^^

    BalasPadam
  10. ibu, mar pernah cuba buat.. tp tu lah mcm xmenjadi.. huhu.. sedih je.. tp nanti nak try la tutorial ibu ni, mne twu dpt blog kemas mcm ibu :)

    BalasPadam
  11. ibu...BK dah try wat menede ni tapi xberjaya..ibu tolong buatkan boleh?

    BalasPadam
  12. terima kasih kerana share... dah cuba buat.
    :)

    BalasPadam
  13. TQVM,, singgah belogisam,, tutor ini berguna, baru je try

    BalasPadam
  14. Terima kasih sbb buat tutorial ni. =)

    BalasPadam

Terima kasih atas kunjungan dan komen-komen ikhlas daripada anda. Insya-Allah kunjungan anda akan dibalas.