Beberapa teman menanyakan bagaimana cara membuat sidebar accordion effect seperti yang ada di menu sidebar TemplatePanic.com. Jadi daripada menjawab satu-persatu, saya akan mempostingkan tutorial ini di sini.
Download mootools.release.83.js. Lalu upload file tersebut ke directory utama anda, sehingga menjadi http://www.NamaBlogAnda.com/mootools.release.83.js
Masukkan kode berikut ke stylesheet anda:
#box1 h2 {
display:block;
cursor:hand;
margin: 0 0 18px 0;
background: #ffffff;
font: 1.05em Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 9px 0px 12px 24px;
color: #32474B;
}
#box1 h2:hover
{
opacity:.75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
}
.box p {
margin-left: 18px;
}
Taruh kode berikut ini di header, yaitu antara <head> dan </head>:
<script type="text/javascript" src="https://www.NamaBlogAnda.com/mootools.release.83.js"></script>
<script type="text/javascript">
function sliderinit() {
var ht = $S('htmlcode');
var htmlSlider = new Fx.Slide('htmlcode', {
duration: 500,
onComplete: function(){
if (this.now[0] > 0) this.wrapper.setStyle('height', '');
}
});
var jsSlider = new Fx.Slide('jscode', {
duration: 500,
onComplete: function(){
if (this.now[0] > 0) this.wrapper.setStyle('height', '');
}
});
jsSlider.hide();
htmlSlider.hide();
$('showhtml').addEvent('click', function(){htmlSlider.toggle();});
$('showjs').addEvent('click', function(){jsSlider.toggle();});
}
function accordioninit(){
var trig = $S('.trigger');
var box = $S('.slider');
var ac = new fx.Accordion(trig, box, {'alwaysHide' : true, 'start': 'all-closed'});
}
Window.onDomReady(function(){
accordioninit();
sliderinit() ;
});
Terakhir, masukkan kode berikut ke sidebar:
<div id="box1" class="box">
<h2 class="trigger">Links</h2>
<div class="slider">
<p>
<ul>
<li><a href="http://www.templatepanic.com">TemplatePanic: Free Blog Templates</a></li>
<li><a href="http://www.1001MovieBox.com/">1001 Movie Box</a></li>
<li><a href="http://www.1001ChristianClipart.com/?s=webhosting">1001 Christian Clipart</a></li>
</ul>
</p>
</div>
mohon lebih diperjelas dong mba, soalnya pemula ni,..setelah ngedownload “mootools biar masuk Url:,…ga tahu saya alias buntu mohon di penjelasanya ya mba makasih sebelumnya
makasi jeng atas ilmunya
segera di praktekkan
newbie…mohon bimbingan 🙂
perlu saya coba dulu
aduhsaya masih binggung nih… mumet sekali…
Terima kasih banyak informasinya sangat bermanfaat sekali, nanti saya terapkan di sidebar blog saya