Cara Membuat Multi Spoiler

Sebelumnya saya posting Spoiler dengan Judul Peringan Loading Blog dengan Spoiler itu hanya satu obyek elemen saja pada satu Gadget, :z
Sekarang saya akan kembangkan lagi menjadi Multi Spoiler dalam satu Gadget yang bisa menampung banyak obyek elemen, [Ingat kawan satu Gadget di Sidebar cukup memberatkan Loading Blog kita] :#
Oke langsung saja ke Cara Pembuatan Multi Spoiler ini :

• Masuk ke Account Blogger dengan ID kawan
• Pada Perancang template / template Designer pilih Tambah Gadget - HTML / JavaScript.
• Copas [copy - paste] Kode berikut kedalamnya
• Setting dan Edit sesuai keperluan kawan
• Simpan template kawan :@ 

<style type="text/css">

h5 {

font-family: Tekton Pro, trebuchet-ms, arial, tahoma;

font-size: 16px;

padding: 0 0 1em;

font-weight:bold;

color: #FFFF00; 

}

.msg_list {

list-style: none;

margin: 0;

padding: 0;

width: 100%;

}

.msg_head {

padding: 5px 10px;

cursor: pointer;

position: relative;

background-color:#699AB8;

margin:1px;

}

.msg_body {

padding: 5px 10px 15px;

background-color:#95CAFF;

}

</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

//hide the all of the element with class msg_body

$(".msg_body").hide();

//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked

$("#firstpane h5.msg_head").click(function()

{

$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");

});

//slides the element with class "msg_body" when mouse is over the paragraph

$("#secondpane h5.msg_head").mouseover(function()

{

$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");

});

});

</script>

<div class="msg_list" id="secondpane">

<h5 class="msg_head">&#187; JUDUL</h5>

<div class="msg_body">

disini simpan file kawan

</div>

<h5 class="msg_head">&#187; JUDUL</h5>

<div class="msg_body">

disini simpan file kawan

</div>

<h5 class="msg_head">&#187; JUDUL</h5>

<div class="msg_body">

disini simpan file kawan

</div>

Catatan :

1. #FFFF00; adalah Judul dengan warna Kuning
2. 100% adalah lebar tampilan [sesuaikan dengan tempat atau Sidebar Blog kawan]
3. #699AB8; adalah latar belakang Judul dengan warna biru gelap 
4. #95CAFF; adalah latar belakang body Isi dengan warna biru muda
5. JUDUL adalah Judul Spoiler yang kelihatan :d  
6. disini simpan file kawan adalah tempat kawan menaruh, File, Script, Gambar dll :D 
7. Untuk membuat judul baru, kawan cuku menambahkan kode dibawah ini : 

<h5 class="msg_head">&#187; JUDUL</h5>

<div class="msg_body">

disini simpan file kawan

</div>

Permasalahan dan solusi :

• Spoiler ini akan tampil pertama kali [saat loading] semua isinya akan kelihatan berjejer kebawah, disekat dengan Judulnya masing-masing yang selanjutnya akan kelihatan seperti contoh tersebut diatas.
• Kawan tidak perlu meng-Klik seperti Spoiler yang dulu, cukup mouse kawan dekatkan / jalankan diatasnya dan secara otomatis Spoiler akan terbuka [buka tutup].
• Kalau Spoiler macet alias tak mau jalan atau berada di dalam Spoiler diatasnya, kawan cukup perhatikan pada akhir isi  [contoh diatas : disini simpan file kawan </div>]  kode </div> ini bisa ditambah atau dikurangi :x untuk mengatasi kemacetan tadi. :s tapi jangan sampai tidak ada </div>

Mudah-mudahan apa yang saya sampaikan ini bisa membantu dan bermanfaat buat kawan !!!