Menu Akordion Untuk Blog
Menu Akordion untuk blog,sila lihat Demo(widget pada sidebar bernama Akordion Example)
1.Log in ke Blogger Dashboard--->Design/Layout--->Edit HTML
2.Cari kod </head>
3.Pastekan kod dibawah ni sebelum/atas kod </head>
<script src='http://www.webdesignerwall.com/demo/jquery/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
</script>
4.Cari kod ]]></b:skin>
5.Pastekan kod dibawah ni sebelum/atas kod ]]></b:skin>
<style type='text/css'>
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>
6.Klik save template
7.Sekarang pergi ke Design/Layout-->Page Element-->Add a gadget-->HTML/Javascript
8.Pastekan kod ni didalam HTML/Javascript
<div class='accordion'>
<h3>your title 1</h3>
<p>
<h3>your title 2</h3>
<p>
<h3>your title 3</h3>
<p>
</div>
<h3>your title 1</h3>
<p>
your content 1
</p><h3>your title 2</h3>
<p>
your content 2
</p><h3>your title 3</h3>
<p>
your content 3
</p></div>
9.Klik Save
10.Untuk edit kod didalam HTML/Javascript,ubah pada perkataan merah iaitu your title dan your content.
3 ulasan
fitri, nak tanya yang menu akordian nih, slow kan blog tak? hihi menarik hati jugak..hehee
Reply@mzhany Tak,skrip dia x berat
Replynag cuba
Replytengkyu
http://blue-decode.blogspot.com
Nota: Hanya ahli blog ini sahaja yang boleh mencatat ulasan.