> > Membuat Widget "Pintu Geser"

Membuat Widget "Pintu Geser"

Posted on 2008-07-28


Lho...maksudnya apa sih judulnya? Pertama-tama, saya akan jelaskan secara sederhana dulu. Pernah ngeliat yang namanya pintu geser? Siapa sih yang nggak tahu yang namanya pintu geser. Eh, aku bukan lagi promosi jualan pintu geser lho...

Kembali Ke Laptop Indologger

Seperti halnya TabView yang pernah dibuat oleh beberapa blogger lokal seperti Agus Ramadhani atau si Hoctro (berbahasa londo/inggris), pintu geser ini juga merupakan skrip javascript dari YUI alias Yahoo User Interface. Katanya, dioprek lagi menjadi Bubbling Library Javasript.

Nha, untuk membuat widget "Pintu Geser" ini kedalam blog anda, caranya susah-susah-gampang. Dikarenakan kode-kode yang harus dimasukkan ke dalam script HTML blog anda mirip dengan kereta api :D. Oya, perlu diketahui...widget ini mengandung beberapa unsur javascript yang berarti dapat sedikit melambatkan loading page blog anda. Jadi, silahkan dipikir-pikir dahulu......


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 :)



Category Article