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:

Natasha Amira Ariffin berkata...

tulisan biru tu ta faham :)

Unknown 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 :)

Natasha Amira Ariffin berkata...

hehe da faham . tq aerol

Natasha Amira Ariffin berkata...

tq ~

Unknown berkata...

sama2 ^^

Ismi Azraf berkata...

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

kindergartenlibrary berkata...

wah !!
banyak da tuto ko ..
good !

Unknown berkata...

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

Unknown berkata...

nelly:
tpi aku tak top mcm kau :p hehehe

Fendi BL036 berkata...

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

tak percaya? meh tgk....

Unknown berkata...

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

nurradizan berkata...

macam mane nak lebarkan kotak dea erk ?

✿ mizz EiQaa Laa ✿ berkata...

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

Unknown berkata...

@mizz EiQa

buat lagi dan lagi! ehehe

Artikel menarik

Related Posts Plugin for WordPress, Blogger...

lik lak,kejap jeww ^^

Daisypath Anniversary tickers