Cara Membuat Spoiler Bertingkat

Sebelumnya saya sudah berbagi dengan kawan cara membuat Spoiler dan sekarangpun masih tetap tentang Spoiler cuma yang ini seperti Tab Menu artinya bisa lebih dari satu Spoiler alias bertingkat :z; 

Perhatikan Demonya : 

» KOMENTAR BLOGGER

» JUDUL

disini simpan file kawan

Catatan :

Demo diatas setelah coba cek akan jalan saat Loading, karena ini di postingan, kalau kawan ingin mencoba Demo sesuai penempatannya [Sidebar] silahkan pada Blog Demo disini  

Setelah kawan memperhatikan Demonya, sekarang mari ke Cara membuatnya :

• Masuk Account Blogger dengan ID kawan
• Pada Dasbor Pilih Tata Letak 
• Pilih Tambah Gadget - HTML/JavaScript
• Copas Script berikut kedalamnya

<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;
text-shadow: 2px 2px 2px #000;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background:-moz-linear-gradient(top,#236C90,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#236C90),to(#FFF));
margin:1px;
border:1px solid #FFF;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;
}
.msg_body {
padding: 5px 10px 15px;
background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#FFF),to(#95CAFF));
border: 2px solid #699AB8;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;">
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/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 SPOILER</h5>
<div class="msg_body">
Simpan disini File kawan</div>
<h5 class="msg_head">&#187; JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>

• Silahkan kawan mengganti teks yang berwarna merah dengan kebutuhan
• Seandainya kawan ingin menambahkan Spoiler lagi cukup Copas dari 

<h5 class="msg_head">&#187; JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>

• Simpan Blog kawan dan lihat hasilnya