Membina Hide Shout Box Pada Sisi Kanan Blog Anda

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

Langkah 1

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

Langkah 2

Copy dan paste code di bawah kat HTML/Javascript. Gantikan teks Masukkan kod Shout Box di sini dengan kod Shout box anda. Kemudian preview dan save.

<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/AVvXsEjK6zmqszMBgXDPAvWVzM6iLC9Uc2e6Y0YCRw5n_6vqA3XvPGlsYeO_FN27zBWIWBlw2s7rtt0A2ht1sZfDk2sxW5oewkW1MkQ2lkI4DyqWtWVJxMoVTnj2bCLR9bTAK7BEPOK4CMO9cQ9i/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>