Cara Memasang Hidden Shoutbox

Assalamualaikum,

hari  ini saya ingin berkongsi tutorial cara memasang hiden shoutbox.Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang boleh disembunyi untuk menjimatkan ruang pada blog.

Berikut langkah-langkah membuat hidden shoutbox :

1.Sign blog anda.

2.Klik Design.

3. Klik Add a Gadget.

4.HTML / Javascript.

5.Copy kod dibawah ini.

<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/AVvXsEj-XHGRiQqDMq8WkhFofc_oAOwaXjFTBwWSeZJKi3C67dgyPqbaNiQFcr9Stciq7h4E7VSnrw0VQBOh1U_nEZv6upr8tZ07XqOj7F-2aQaSniI5YwQF4XXOSTu0OscA01m0n75ROHXKvHo/s400/Shoutbox+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 SHOUTBOX ANDA DISINI

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

6.paste kod didalam content.

7.Save.

Nota :Gantikan kod shoutbox anda pada perkataan berwana merah.

Selamat Mencuba….