Wednesday, 1 May 2013

Tutorial: Gabungkan 4 widget di sidebar menjadi satu

Assalamualaikum . Macam yg korang nampak , miraa gabungkan empat widget iaitu Followers , Like , Instagram dan juga Twitter sekaligus . Ala bukan gabung yg cara memanjang tu . Tapi boleh ubah2 macam ni hah . Haha comel dan molek kan ? Takde memanjang sampai dua meter ke bawah blog korang . Nak tak ? Mesti nak punye hahaha . Soalan cepumas . Tapi sebelum tu cuba tengok sini dulu . Huhu . Thankyou :p okay mula-mula korang masuk blog dan pergi Add Gadget dan masuk HTML/JavaScript . Kemudian copy code kat bawah ni ;
<style type="text/css">
    .tabber {
     padding: 0px !important;
     border: 0 solid #bbb !important;
    }
    .tabber h2 {
     float: left;
     margin: 0 1px 0 0;
     padding: 3px 5px;
     border-bottom: 2px solid #ffd2e0;
     margin-bottom: -1px; /*--Pull tab down 1px--*/
     overflow: hidden;
     position: relative;
     background: #fff0f5;
    }
    html .tabber h2.active {
     background: #ffd9e6;
     border-bottom: 2px solid #ffd2e0; /*--"Connect" active tab to its content--*/
    }
    .tabber .widget-content {
     border: 0px 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 : 4
     });
    });
    </script>
    <!-- to make sure the widget works, do not alter the code below -->
<div id='codeholder'><p>    <a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"> </a></p></div>
Sudah ? Jangan tinggalkan satu pun code tau . Hehe . Okay korang pergi HTML/JavaScript tadi dan paste kod tu kat sana . Kod kat atas ni miraa tiru untuk bentuk sidebar miraa sekarang . Kalau korang nak , korang boleh tengok tutorial ni pula . Okay ? Yg kaler merah tu untuk garisan pink yg tebal tu . Yg kaler biru pula untuk yg atas garisan pink terang . Dan yg warna hijau pula untuk jumlah widget yg korang nak gabung hahaha faham tak ? Sebab miraa tak faham apa miraa mengarut xD  

Korang save kalau korang dah ubah warna tadi ye ? Kemudian korang drag gadget tadi di atas widget yg korang nak gabungkan . Miraa gabung empat widget kan ? So ini gambaran kalau korang nak faham . HTML/JavaScript yg atas tu lah tempat coding tadi miraa simpan . Yg 1 , 2 , 3 dan 4 tu pula widget yg miraa gabungkan . So amacam ? Ada faham tak ? Hehe harap korang faham ;-)
Share:

11 comments:

Terima kasih kerana sudi membaca , jangan lupa tinggalkan komen :)
Fikir semula sekiranya korang ingin meninggalkan komen lucah, ugutan, mengancam, identiti palsu, dan menyakitkan hati. Baca AKTA 588, AKTA KOMUNIKASI DAN MULTIMEDIA 1998. Oh, sebelum tu, tengok lah site awesome
ini