February 10, 2013

, ,

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
Share:

22 Sila Komen:

Cikgu ieta. Social Media Expert. Speaker Digital Marketing. said...

Memang nak sesangat tahu... tqvm Uzu :)

Unknown said...

thanks for sharing kak uzu :)

http://nurfaezahabdullah1712.blogspot.com/

Unknown said...

Thanc sharing uzu :)

Dingdang said...

dah jadi :)

Unknown said...

thanks sharing..tp ermmmmm mcm susah jer.

Unknown said...

thanks for tutorial...... nice

Nadia Johari said...

bgus tutorial ni..penh tgk kat shida punyer

Cikgu ieta. Social Media Expert. Speaker Digital Marketing. said...

sy pun pening2 lalat gak nak memahamkannya. haha...

Cikgu ieta. Social Media Expert. Speaker Digital Marketing. said...

4 Kali baca baghu akak paham dik... haha... maklumle... pelajar tua... kiki terima kasih bebanyak ya Uzu coz wat tutor yg memang dh lm akak cari ni :)

Diari Si Froggie said...

ala..ala..ala.. tak sama cantik macam shida punya dengan uzu punya :P mohon shida buatkan untuk aida.. huwaaaaa.. haha

Solehah Shamsuddin said...

thanks awk. sy paham pe yg diajar...

Shida Radzuan said...

nice ^_^

Unknown said...

dah buat and menjadi !! thankyouu

mohd zuhri said...

senangnya tuto ni
kena cuba ni

Unknown said...

dah banyak kali try,tapi tak jadik..:'(

Fiqa Nsz said...

thanks dear for the sharing :)

anshmnf said...

Dah jadi..Thanks for the tutorial :)

Shad said...

dah jumpa tutorial awesome ni. da lma cari.. tq2..

AyueJean said...

Alamak... Tak jadi laaaaa.... =(

theathirah said...

almost done :) btw, thankyouu

Unknown said...

pening. tk tau nak buat macam mana :'(

Misya said...

Ala.. dah try wat banyak kali tapi tak jadi. Sedeyy..:'(