✿Baca Entry Yang Lepas✿

Sunday, 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

22 comments:

Ieta Mat Sa'ad said...

Memang nak sesangat tahu... tqvm Uzu :)

Nurfaezah Abdullah said...

thanks for sharing kak uzu :)

http://nurfaezahabdullah1712.blogspot.com/

CiK Bella said...

Thanc sharing uzu :)

Nurul Faiz said...

dah jadi :)

nea lopah said...

thanks sharing..tp ermmmmm mcm susah jer.

Remy hazza said...

thanks for tutorial...... nice

Nadia Johari said...

bgus tutorial ni..penh tgk kat shida punyer

Ieta Mat Sa'ad said...

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

Ieta Mat Sa'ad 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 ^_^

Amer Amirah said...

dah buat and menjadi !! thankyouu

Mohd Zuhri said...

senangnya tuto ni
kena cuba ni

siti zawiah said...

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

Fiqa Nsz said...

thanks dear for the sharing :)

Nurul Anisah said...

Dah jadi..Thanks for the tutorial :)

sha dhira said...

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

AyueJean AJ said...

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

Budak Sedih said...

almost done :) btw, thankyouu

Noraslin Zahanor said...

pening. tk tau nak buat macam mana :'(

Misya (Aimi Syahirah) said...

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

Copyright © ✿Emas✿Putih✿Blog✿ Designed by azhafizah.com