Tutorial Gabungkan Widget

Assalamualaikum dan salam sejahtera.

Hari ini kita bersama lagi dalam rancangan Tutorial Bersama DJH. Baiklah. Bagi episod kali ini,angah nak ajar anda tentang cara-cara untuk gabungkan widget menjadi satu. Untuk contoh,anda boleh tengok di dalam gambar di bawah ini.

Nampak kan? Bagi angah sendiri,bila kita dah gabungkan widget,bermakna ruangan dalam blog dapat disave dan dikurangkan. Selain itu,angah suka bila kita boleh pilih widget mana yang kita nak tekan.

Cara-caranya :-

Pergi ke Layout dan klik Add a Gadget.

Pilih HTML/Javascript widget.

Kemudian,anda copy code di bawah ini.

<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: #e0e0e0;
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: #fff;
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> 

Paste kan code tersebut ke dalam ruangan HTML/Javascript itu.

*Anda boleh mengubah bilangan widget yang mahu digabungkan dengan menukar nombor pada tabCount : 3

Seterusnya,kedudukan widget HTML/Javascript tersebut perlulah diletakkan di atas widget yang anda hendak gabungkan. Lihat gambar.

Kemudian,klik save. Dan lihat blog anda.

Peringatan :-

• Pastikan anda meletakkan tajuk pada setiap widget yang anda mahu gabungkan.Tabber widget tidak akan berfungsi sekiranya anda tidak letakkan tajuk pada widget.
• Kurangkan kelebaran atau kepanjangan tajuk widget untuk membolehkan semua tajuk widget boleh dimasukkan dalam satu barisan sahaja.Anda hanya perlu menggunakan tajuk widget yang pendek.

Sekian sahaja tutorial daripada DJH. Sebarang kemusykilan atau ketidak fahaman boleh diberitahu diruangan komen.

Sumber :  Blogger Sentral.