Cara Memasang Hidden Shoutbox

Kali ini mrul ingin berkongsi tips cara memasang hiden shoutbox.Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang boleh disembunyi untuk menjimatkan ruang 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/AVvXsEguhsaYmyd9IvF8-yEodkU48_Lj9i5eyKK5dyPeHWkIxITGv0DQl8rsrTGr8ISN-9Lk2p6L2fgtYFfiWhSYVJidsMV-JYlUI03MpkGLOmNAdyUprrrlSNFSU4hqFHFieT5CokqmLKdpLUU/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.

Contoh :

copy kod imej url

Selamat Mencuba….