Cara Membuat Spoiler Bertingkat Tersembunyi

Setelah selesai bergelut dengan kesibukan rutinitas dan Redesign Template Blog ini walaupun belum final hasilnya, maklum saya tidak pernah puas dan selalu ingin mencoba sambil belajar, tak tahunya ada kawan kita bertanya di CBox  [cara bikin chating box kayak gini gimana yah sob, ajarin dong, atau linknya yg ada disini] baru saya sadar sudah semingguan nggak memposting :@ artikel untuk share sama kawan-kawan yang setia :z mengunjungi Blog ini.

Kegunaannya untuk menampilkan Blog kita supaya kelihatan simple serta memperingan Loading dan berat Blog, :r Kalau kawan masih ingat dengan postingan saya sebelumnya tentang Cara Membuat Elemen Tersembunyi dan Spoiler Bertingkat Ringankan Loading dan Berat Blog  :O maka sekarang saya akan gabungkan keduanya pada satu gadget dan untuk cara membuatnya sangat gampang :x

1. Masuk ke Account Blogger dengan ID kawan
2. Pada Design template / Perancang template pilih tambah gadget
3. Copas kode berikut kedalam gadget tersebut 

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0WZHyTaU10fXG3H5R6y5kL3W5zejvHgQnMGdWI0HyGlK0fAzlJZlesWe67_dHhAQzjXzNA5xlkTcG_2Sm6ZvObU9e81ctB-bj1gzhCfD9EXPu2DN_OI0B6pEEKS4DXAoDLZNDeB2JeI/s1600/Untitled-5.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #7ca9c0;
background:#d4e3ea;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()">
</div>
<div class="gbcontent">


<div style="border: 1px solid #00f; height: 500px; overflow: auto; padding: 10px; width: 250px;">
<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 src="https://sites.google.com/site/jquery01/tabmenuaccordion.js" type="text/javascript">
</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">
» JUDUL</h5>
<div class="msg_body">

SIMPAN DISINI

</div>
<h5 class="msg_head">
» CHATTING BOX </h5>
<div class="msg_body">

CONTOH KODE CBOX

</div>
<h5 class="msg_head">
» JUDUL</h5>
<div class="msg_body">

SIMPAN DISINI FILE KAWAN

</div>
</div>
<div style="text-align: bottom;">
<a href="javascript:showHideGB()">
[close]
</a></div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Sedikit saya berikan penjelasan khusus untuk text yang berwarna merah :

• top:50px; adalah jarak dari atas 
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU0WZHyTaU10fXG3H5R6y5kL3W5zejvHgQnMGdWI0HyGlK0fAzlJZlesWe67_dHhAQzjXzNA5xlkTcG_2Sm6ZvObU9e81ctB-bj1gzhCfD9EXPu2DN_OI0B6pEEKS4DXAoDLZNDeB2JeI/s1600/Untitled-5.png adalah URL image SUARA ANDA yang akan kelihatan di tepi / sisi Blog, silahkan diganti sesuai kebutuhan 
• <div style="border: 1px solid #00f; height: 500px; overflow: auto; padding: 10px; width: 250px;"> adalah lebar dan tingginya.
• <h5 class="msg_head"> Â» JUDUL</h5> adalah judul tab yang kelihatan. 
• SIMPAN DISINI FILE KAWAN tempat menyimpan kode scriptnya
• Seandainya kode scriptnya tidak berisi width [lebar] dan heigth [tinggi] tambahkan dan sesuaikan dengan yang lainnya
• Simpan template kawan dan lihat hasilnya :#