Nurulbalqis 'Olive' Izzuddin ; 16 years old.

“Time is an illusion, lunchtime, doubly so."

[Tutorial]: Automatic Scrolling Sidebar

, Monday @ 9:33 AM } 4 comment (s)


takut je aku nengok gambar ni.,,
assalamualaikum ,, ! ye ye ye,, Cik Bee nak buat tutor lagi la ~ Ada orang tanya so Cik Bee kenalah tolong..,



Credit: Meira

Automatic scroll sidebar tu ialah yang ada kat sidebar Cik Bee ni., haa~ yang warna hijau tu laa.., cuba mouse over kan., dia scrolling kan? Ye, tu yang Cik Bee maksudkan.., and one more thing, tutorial ni bukan dari idea Cik Bee tapi dari Meira., blog dia memang sweet n aman damai~ chewah~~
Ye, ye, ye, Cik Bee nak start le sekarang~

1. Login blog macam biasa, pergi ke Design >> Page Elements >> Add A Gadget >> HTML/JavaScript
2. Paste kan kod di bawah ni dalam Content HTML/JavaScript tadi;
<style type="text/css">
h5 {
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:#BEF781;
margin:1px;
-webkit-border-radius: 45px;
-webkit-border-bottom-right-radius: 21px;
-webkit-border-bottom-left-radius: 21px;
-moz-border-radius: 45px;
-moz-border-radius-bottomright: 21px;
-moz-border-radius-bottomleft: 21px;
border-radius: 45px;
border-bottom-right-radius: 21px;
border-bottom-left-radius: 21px;
}
.msg_body {
padding: 5px 10px 15px;
background-color:#ffffff;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
}
</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">

KOD KORANG


</div>

<h5 class="msg_head">TAJUK 2</h5>
<div class="msg_body">


KOD KORANG

</div>

<h5 class="msg_head">TAJUK 3</h5>
<div class="msg_body">

KOD KORANG

</div></div>

*highlight kuning tu masing-masing untuk font dan saiz tulisan title sidebar
*highlight fuchsia untuk warna tulisan title sidebar
*highlight pink untuk warna background title sidebar
*highlight hitam untuk warna background gadget korang, tapi kalau warna putih lagi cantik., so tak payah tukar
*highlight biru untuk bentuk border., tak payah tukar pun tak apa
*tulisan merah tu letak la tajuk sidebar
*tulisan biru pulak letak kod .,

Kalau nak letak gadget lagi just tambah kod

<h5 class="msg_head">TAJUK</h5>
<div class="msg_body">

KOD KORANG

</div></div>

kat bawah sekali.,

kalau tak jadi/tak faham komen di entri ni ye.., :)

Labels:


4 commenter(s)