Tutorial : Cara Nak Gabungkan Widget/Gadjet

Salam

Hari ni ada orang tanya tutorial cara nak gabungkan widget ni.

Actually semalam bloglist-II uzu, uzu gabungkan jadi 1 tempat supaya jimat ruang.

Thanks to Shida Radzuan sebab sudi tolong uzu gabungkan widget tu.

Yang ni uzu nak ajar korang lah camne buat tutorial gabungkan widget pada yang belum tahu.

sebab uzu baru faham camne nak buat. Hehe

1. Dashboard --> Layout --> Add a Gadjet --> Html

Sediakan dahulu gadjet-II yang nak di gabungkan. Contoh , uzu nak gabung 3 bloglist, so uzu dah ready siap-II ketiga-II bloglist ni .

2. Copy code kat bawah ni 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>

4. Susun code kat atas ni, pastikan code atas ni berada di atas widget yang korang nak gabung.
Contoh, uzu nak gabung ketiga-II bloglist uzu, so uzu dah letak siap-II bloglist yang nak di gabung kat bawah ni . Yang uzu kaler merah kat bawah ni lah yang kita kena susun di atas gadjet-II yang nak di gabung.

Yang code banyak-II yang korang copy paste td, susun di atas, macam uzu susun kat atas ni.

bloglist yang nak di gabung berada kat bawah code tadi.

5. Tukarkan :

code ni background: #ffffff; kepada code warna background tab tu,

yang ni background: #fffffff; kepada warna sidebar korang

and last sekali tukar yang ni tabCount : 3 untuk jumlah tab yang korang nak gabung.

note :

Bila korang nak 4 widget digabung, bila code gabung widget di susun di layout,

dengan automatik gadjet akan secara automatik menggabungkan apa sahaja gadjet-II yang berada di bawah  code tersebut dengan sendirinya sehingga tergabungkannya 4 gadjet.

tu sebab, if korang xnak keliru, sila sediakan gadjet-II yang korang nak gabung sebelum susun code kat atas tu.

Uzu pun xtaw camne nak explain. Fuhh pening jugak nak explain.

Anyone yang tak faham boleh tanya uzu eh kat facebook. 

Thanks for reading.Salam

credit to : Shida Radzuan