Membina hide Shout Box pada sisi kanan blog

Untuk membina fungsi auto hide kotak Shout Box pada sisi kanan blog, seperti yang boleh anda lihat di sini (klik), sila ikut beberapa langkah di bawah.

Langkah 1

Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript.

Langkah 2

Salin kod biru di bawah dan paste pada notepad. Gantikan teks Masukkan kod Shout Box di sini dengan kod Shout box anda.

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUYFIbFp4utaNKOuYGzr2-FkdsV8WtpdK66XeiCwsMLxZbld2JmNAT9pF4PTjUz1rGbwsWPn-fwr4rT8dIjsZ2riqOzmv3MNphe6yau2IDOHEQHH-cHmYxbuAvj0CFFyLDVK2Fx4EeET2/s320/tabs.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #666666;

background:#F5F5F5;

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">

Masukkan kod Shout Box di sini

<div style="text-align:right">

<a href="javascript:showHideGB()">

[close]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Langkah 3

Salin kod yang telah siap di edit pada notepad tadi (rujuk langkah 2) dan paste pada Content HTML/Javascript (rujuk langkah 1).

Akhir sekali klik Preview dan jika anda berpuas hati dengan hasilnya, klik saja Save.