Wadah Madrasah Pengalaman: Tutorial wat Sliding Sidebar_design/layout template


Thursday, May 19, 2011

Tutorial wat Sliding Sidebar_design/layout template

.



Salam korang...

Kali nie Wan nak wat Tutorial wat Sliding Sidebar_design/layout template..

So apa tunggu lagi..

Jum tutorial..


Mula mula korang ke...

Dashsboard>design>Add gadget>HTML

Korang Copy kod bawah nie and paste kat Gadget HTML korang.





<style type="text/css">

h5 {
text-align:center;

text-shadow: 2px 2px 3px #000000;

font-family: trebuchet-ms, arial, tahoma;

font-size: 13px;

padding: 0 0 1em;

font-weight:bold;

color:
#000000;

}


.msg_list {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

background-color:#9efb66;

margin:1px;

}

.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>





kat atas tu..Korang leh ubah

#000000 warna bayang bayang untuk tulisan korang
#000000 untuk warna tulisan korang.
#9efb66 untuk warna background .(kod warna korang leh cari HTML kod warna k)
13 yang nie size tulisan korang..



Lepas selesai korang edit or letak kod yang kat atas tu dalam add gadget korang tu..Korang tambah kod yang dekat bawah nie lak dalam ruang add gadget yang sama..Kod yang dekat bawah nie untuk barang barang yang korang nak letak..Gambar ke..Shoutbox ke..Ape ape je lah k..Law korang nak wat banyak..So korang kene copy and paste banyak kali lah kod nie..Maksudnya..satu barang satu kod yang dekat bawah nie..Law ada 5 barang korang nak wat..So korang copy kod kat bawah nie 5 kali ...faham??



<div class="msg_list" id="secondpane">
<h5 class="msg_head">TAJUK</h5>
<div class="msg_body">
BARANG KORANG NAK LETAK
</div></div>





Kod dekat atas tu..Korang edit lah k..
TAJUK yang nie tajuk yang korang nak letak tu.
BARANG KORANG NAK LETAK yang nie barang yang korang nak letak kat atas tu..



Law dah selesai
Korang save and view..


Selamat mencuba.

Papai.


.



18 comments:

sarah mohamad said...

dah lama cari tuto ni. tengs wan :)

Wan_hazel said...

welkam..ehehhe

Cik.Tedy said...

ehee,,datang intai tuto arie nie...=))

khai said...

jap..'barang yang korang nak letak tu' link ke ape??

Wan_hazel said...

Cik.Tedy

boleh je..ehehe

Wan_hazel said...

khai

kod barang..law nak letak gambar so letak kod gambar..law nak letak shoutbox so letak kod shoutbox..ehehhe

m!3yr4h_LolLy said...

terbaek la tutorial nie.. gud wan !

ecadwinkyasha said...

woot woot woot..da lama cari ini.tengs wan :)

ana Delisha said...

salam wan

nak request tutorial untuk animated twitter boleh tak. jadi status tweet tak lah statik :') kalau wan tak busy lah

Wan_hazel said...

macam mana erk twitter animation tu??

zieyRa suLLey© said...

wan tak jadik poong
die tak slide bile kite kite klik
tapi die show sume

Wan_hazel said...

mesti ade kod salah tu kan..try balik..

Are Lieya said...

kod yang psl nk letak brg sume tu..nak letak kat mane ?

Wan_hazel said...

wan ade kasi kod yg terakher tu..sila tgk ye..ehehhe

noraim said...

salam.
tak jadi pon. dea tak kuar slide. cmne ye?

Wan_hazel said...

noraim

tak leh ke??dah tambah kod stiao satu brg tu??/

[sutera kasih] said...

dh prnh buat..dulu menjadik..tp skrg ni tiba2 tak menjadik dh..tak tau knapa..

Dah share link utk autopublish di fanpage FB?

Wan_hazel said...

[sutera kasih]

a ah betul tu..skang nie format blogspot lain kot..so tak leh guna dah