.



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.


.