Kalau mau membuat Pintu Geser seperti punya saya itu, ini nih cara buatnya…..

1. Masuk Panel Kontrol > Tata Letak > Edit HTML.

2.Masukkan kode berikut ini diatas tag </head>.
<style type="text/css">
.myAccordion {
float: left;
margin-right: 15px;
}
h3{
padding: 8px;
color: #636363;
background-color: #ffffff;
background-image: url(http://i273.photobucket.com/albums/jj225/ranggalawe/h3bg.jpg);
background-position: top;
background-repeat: repeat-x;
font-weight: normal;
}
.myAccordion .yui-cms-accordion .yui-cms-item {
border: 1px solid #cccccc;
width: 200px;
}
.myAccordion .yui-cms-accordion .yui-cms-item h3 {
margin: 0px;
}
.myAccordion .yui-cms-accordion .yui-cms-item .accordionToggleItem {
background: url(http://i273.photobucket.com/albums/jj225/ranggalawe/accordion.gif) no-repeat 0px 0px;
text-decoration: none;
padding-left: 20px;
display: block;
}
.myAccordion .yui-cms-accordion .yui-cms-item.selected .accordionToggleItem {
background: url(http://i273.photobucket.com/albums/jj225/ranggalawe/accordion.gif) no-repeat 0px -100px;
}
.myAccordion .yui-cms-accordion .yui-cms-item .bd {
height: 0px;
overflow: hidden;
background-color: #fff;
}
.myAccordion .yui-cms-accordion .yui-cms-item .bd .fixed {
overflow: hidden;
padding: 5px;
height: 230px;
}
</style>

dan masukkan juga kode berikut ini tepat diatasnya
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/utilities/utilities.js">
</script>
<script type="text/javascript" src="http://awe.pasarminggu.googlepages.com/bubbling.js"></script>
<script type="text/javascript" src="http://awe.pasarminggu.googlepages.com/bubbling-accordion.js"></script>

Oya, pada kode pemasangan yang pertama itu ada atribut height:230px;...nha kalau anda ingin mengubahnya sesuai panjang widget anda, tinggal ganti kode 230px menjadi auto….lalu simpan dan lihat hasilnya

Ups, hampir lupa…ini dia kode untuk widget “Pintu Geser”nya
<div class="myAccordion">
<div class="yui-cms-accordion persistent rollover slow">
<div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="Arahkan untuk melihat isi">Judulnya</a></h3>
<div class="bd">
<div class="fixed">
<p>
Isi apa aja disini
</p>
</div>
</div>
</div>
<div class="yui-cms-item selected">
<h3><a href="#" class="accordionToggleItem" title="Arahkan untuk melihat isi">Judulnya</a></h3>
<div class="bd" style="height: auto;">
<div class="fixed">
<p>
Isi apa saja disini
</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="Arahkan untuk melihat isi">Judulnya</a></h3>
<div class="bd">
<div class="fixed">
<p>
Isi apa saja disini
</p>
</div>
</div>
</div> <div class="yui-cms-item">
<h3><a href="#" class="accordionToggleItem" title="Arahkan untuk melihat isi">Judulnya</a></h3>
<div class="bd">
<div class="fixed">
<p>
Isi apa saja disini
</p>
</div>
</div>
</div>
</div>
</div>

Berhubung waktu sudah malam, jadi saya pamit dulu deh. Dan selamat dicoba ya :)