Cara Membuat Spoiler Sembunyi disisi Kanan

Posting sebelumnya tentang Peringan Loading Blog dengan Spoiler dan Cara Membuat Multi Spoiler serta Cara Membuat Elemen Sembunyi disisi Kanan Blog :r
Sekarang saya akan mencoba menggabungkan 2 Artikel / Postingan tadi menjadi satu yang saya beri Judul Spoiler sembunyi disisi Kanan Blog :z
Cara membuatnya sangat :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/AVvXsEiYotiYkNwpjSQZUwdj_8wBQ0Q-RFpdn8EQmdXf82hrSW417hanxoOzyJEcl_eWSdXb-J6vrXW30LTv1FsImo8MK5wx9bCem64s6PzsXSWcnL_nmmMT2KYvSZC61wrSgITf5pmTa7VmfU0/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>

Teks yang berwarna merah adalah Kode Spoiler :z
Sedangkan yang lainnya adalah Kode yang menyembunyikan elemen
Penjelasan masing-masing Kode silahkan kawan baca pada Link diatas
Simpan template kawan dan lihat hasilnya :#