tutorial : jQuery Accordian Tab Menu


kepada yang suka letak banyak gadget dan ingin blog nampak kemas walaupun dipenihi gadget .. disini lilo ajarkan buat jQuery Tab Menu . dengan ini kamu boleh gabungkan 3 gadget atau lebih dari 3 gadget dalam satu gadget HTML/Javascript so ? ini kira 3 in 1 laa . tengok contoh dibawah .. tapi ini besar tau ? bila dah letak kat sidebar dia automatik ikut size sidebar kamu . jadi jangan bimbang .



title no. 1

ini isi no. 1
title no. 2
ini isi no. 2

title no. 3
ini isi no. 3

1. Dashboard > Design > Add gadget > HTML/Javascript
2. copy codes dibawah dan paste .

<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:#FFB6D6;
margin:1px;

-moz-border-radius: 35px;
border-radius: 35px;

}
.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">title 1</h5>
<div class="msg_body">
<center>
Isi dalam title 1
</div>
<h5 class="msg_head">title 2</h5>
<div class="msg_body">
Isi dalam title 2

</div>
<h5 class="msg_head">title 3</h5>
<div class="msg_body">
Isi dalam title 3
</div>
</div>

  • purple warna title tab menu .
  • warna hijau ialah background tab menu .
  • warna merah untuk background isi tab menu . 
  • title 1, title 2 & title 3 ganti ikut kehendak kamu .
  • Isi-2 tajuk 1, 2 & 3 type atau letak apa-apa pun .

codes warna search SINI . then Save , TOLONG JANGAN preview melalui Rich Text , nanti tak jadi .. faham ? okay done !
0 comments

tutorial : Center Header

1. Dashboard > Design > Edit html *tak perlu tick expand widget template
2. Ctrl+F search this code

/* Content


3. kemudian , paste code bawah ni sebelum code /* Content 
.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
4. preview dan save
0 comments