cara-cara nak buat widget jadi slide di sidebar

Assalamualaikum dan salam sejahtera kepada pemabca sekalian,Petang ni aerol nak buat satu tutorial boek punya,mungkin tutorial ni dah ramai yang mengetahui,tapi apa salahnya kan kita tunjukkan kepada yang belum tahu ,yelaa ada ilmu jangan kedekut :) ..sharing is loving right..hehe tak usah lr stingy sangat,.. :)..okeyh mari kita mulakan tutorial dengan muka yang tersenyum :) tenyum2. .. :D


Langkah2 wajib yang anda perlu lakukan :),pergi ke design/page elemant/add a gadjet dan paste code ni pada html javascript..pada yang newbie,kalau tak faham jugak,boleh inform aerol di fb..cilck here ,sebb aerol malas nak tunjuk yang temeh remeh ni hehehe.

<style type="text/css">h5 {font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#000000;
margin:1px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#FFFFFF;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">
letak lar apa2 1</div>
<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">
letak lr apa2 2</div>
<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">
letak lr apa2 3</div>
</div>


Okeyh,Sebelum tu aerol nak bagi penerangan pada perkataan yang telah diwarnakan tu,perkataan yang bewarna hijau tu adalah warna kepala tajuk widget korang,korang boleh ubah ikut warna kesukaan dengan menukar kord tu dengan warna kesukaan korang,click sini untuk ambil kord warna html.

Pada nombor yang bewarna merah tu adalah angka untuk menetu kan border korang,kalau korang nak kasi dia melengkung korang boleh tukar kepada 10px atau lebih,bergantung lr pada cita rasa korang,kalau aerol,aerol suka lengkung2 sikit :D..

Tulisan yang bewarna purple tu tajuk widget korang,manakala yang bewarna biru tu pula adalah tempat letak code2 widget atau perkataan korang :).

14 ulasan:

shasha berkata...

tulisan biru tu ta faham :)

Aerol Hafiezi berkata...

okeyh,,
aerol jelaskan,yang tulisan warna biru tu adalah code html widget yang kita nak letak,conth macam lagu atau apa2 sahaja yang ebrkaitan code html.. .cuma gantikan pada perkataan warna biru tu jeww :)

shasha berkata...

hehe da faham . tq aerol

shasha berkata...

tq ~

Aerol Hafiezi berkata...

sama2 ^^

FARISZ@AZ.Com berkata...

sistem widgest ni mampu menjimatkan loading blog. tutorial yang bagus.

nelly berkata...

wah !!
banyak da tuto ko ..
good !

Aerol Hafiezi berkata...

Faris:
betul2,,disamping memberi kekemaan,kita mesti pandai mem seimbangkan kedua2 nya :)

Aerol Hafiezi berkata...

nelly:
tpi aku tak top mcm kau :p hehehe

nukilanaffiza... berkata...

hmmm..bagus gak ni aerol...saya pun nak kena upgrade skit2 blog saya...nampak mati jer...huhuh...

tak percaya? meh tgk....

Aerol Hafiezi berkata...

sharing is caring en :) ..hehe okeyh sye terjah sana :D

SHAHIRAH ADIZAN berkata...

macam mane nak lebarkan kotak dea erk ?

mizz EiQa berkata...

nak tanye nih . saya dah ikot smua step . tapi knape sliding dia tak menjadi ek? ade yg silap ke? tq :)

Aerol Hafiezi berkata...

@mizz EiQa

buat lagi dan lagi! ehehe

Artikel menarik

Related Posts Plugin for WordPress, Blogger...

lik lak,kejap jeww ^^

Daisypath Anniversary tickers