[Tutorial]: Automatic Scrolling Sidebar
 |
| 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: tutorial
Olive's.
Assalamualaikum guys c:
» Nurulbalqis binti Khairul Izzuddin.
» Most people call me Bee, Qiss and Olive.
» Born on 29th of May 1997 in Muar, Johor.
» KUSTechs' 2014 senior, SPM candidate to-be.
» Best chums: Fie, Shera, Are, Tasha and Zirah, also Nabilah, my wonderful soulmate, Fyza and Aina.
» Tin Tap, BornToBeat, Bangtan, TVXQ, SHINee, Paramore, MCR, Jesse McCartney, The Wanted ♡
» My interests are on art, music and R&B. //and of course - food
{ Facebook .
Twitter .
Blogskins }
Underline Bold Italicized Strikeout
[Tutorial]: Automatic Scrolling Sidebar
, Monday @ 9:33 AM ♥
|
| 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: tutorial
OLD . NEW
