April 22, 2011

TUTORIAL : ACCORDIAN TABS MENU


tutorial ini khas untuk sahabat saya MIERIL dan FYY..sory tak dapat ajar petang tadi sebab tak balik kerja lagi..hehe

accordian tabs menu ini dapat menjimatkan ruangan di bahagian sidebar korang

caranya

1. log in blog > design > page elements > add a gadget > HTML/Javascript

2. korang copy dan pastekan code dibawah ini diruangan HTML/Javascript


<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:#FA5858;
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">
CODE KORANG
</div>
<h5 class="msg_head">TITLE 2</h5>
<div class="msg_body">
CODE KORANG
</div>
</div>

- tulisan warna hijau yang diboldkan itu korang tukar kewarna pilihan korang sendiri ok? nak pilih warna boleh pilih disini HTML COLOR CODES

- tulisan warna merah yang diboldkan itu korang tukar ke code korang..contoh code shoutmix korang copy dan pastekan ke bahagian 'code korang disini' dan code-code lain macam tu juga.

- tulisan warna kuning yang diboldkan itu korang tukar title korang sendiri. Maybe korang nak letak shoutmix atau recent comment dan sebagainya.






6 comments:

Luqman said...

Yes! jmpe jgk akhirnye tuto nk buat mnde nie..hehe..thanks!! nk try... :)

Diari Si Froggie said...

@Luqaz hehe.. welcome luqaz. buat2 jgn tak buat..

Zazachan said...

kakak, kalau pasang ni banyak tak berat blog yang ditambah?
terasa nak pasang..huhu

Diari Si Froggie said...

@cik zaza berat pon xbyk sgt cik zaza..

Nor Nabillah said...

slm...sis nk tnya..mcm mna sis wt menu tab yg cute 2...(sblah kiri nih)..bole ajarkan...=)

Diari Si Froggie said...

@Nor Nabillah maaf nabillah aida baru perasan komen nie.. yang menu tab tu eh? boleh try tengok blogger nie : http://www.azhafizah.com/2012/03/tutorial-buat-menu-tab-comel-di-tepi.html

Small Cute Green Pointer

Get this tabber widget

Create By :


About Me