IklanBarisMassal.Com: Membuat Spry Kolom Buka Tutup

Judul Iklan: Membuat Spry Kolom Buka Tutup
Isi Iklan: Apa itu spry kolom buka tutup?? Saya juga bingung kalo disuruh ngejelasin bentuknya mah, mendingan langsung lihat contohnya aja deh yang ada di atas artikel ini.


Oke deh kita mulai aja cara membuatnya. Pertama login dulu ke akun blogger anda, lalu klik "Layout" - "Edit HTML". Terus cari kode </head>, nah copy deh salah satu kode di bawah ini sebelum tag </head>. (Pilih sesuai selera)

Tampil dalam keadaan terbuka. (Seperti pada contoh)

<script src="http://indrawan.000space.com/SpryCollapsiblePanel_Open.js" type="text/javascript">
</script>
<link href="http://indrawan.000space.com/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css"></link>


Tampil dalam keadaan tertutup.

<script src="http://indrawan.000space.com/SpryCollapsiblePanel_Close.js" type="text/javascript">
</script>
<link href="http://indrawan.000space.com/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css"></link>


Nah kalo dah beres copy kode di atas, sekarang giliran kode di bawah ini yang dipasang sebelum tag </body>.

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel(&quot;CollapsiblePanel1&quot;);
</script>
Kalau udah selesai, jangan lupa klik "Save Template".
Selanjutnya adalah memasang spry tersebut, kali ini saya gunakan untuk memasang Ad kumpulblogger. masih di menu layout, klik menu "Page Elements" lalu klik "ADD WIDGET" kemudian pilih "HTML/JavaScript", lalu masukkan code berikut:

<div class="CollapsiblePanel" id="CollapsiblePanel1">
<div class="CollapsiblePanelTab" tabindex="0">
[Judul Bar, Teks terserah anda]</div>
<div class="CollapsiblePanelContent">
[isi dari content kolom, misal script kumpulblogger]</div>
</div>
Sudah Selesai? klik aja "SAVE".
Web URL: Sumber: http://wiliantoindrawan.blogspot.com/2010/02/membuat-spry-kolom-buka-tutup.html

0 komentar: