Tutorial : Floating Shoutbox

Hello

Chatbox memang famous kan….bile ade person yang blogwalking, mesti visitor  nak tinggalkan jejak kan. So Lynn continued ngan next tutorial .Ok mari sini?  Lynn  nak ajar untuk buat hide chatbox, ala-ala main sembunyi-sembunyi tu.. 

1. Seperti biasa, Sign in blogger > Design > Page Elements > Add a Gadget > HTML/javascript

2. COPY code di bawah dan masukkan ke dalam HTML/javascript tadi..

<style type="text/css">

.gb_fixed{

position:fixed;

top:50px;

right:0px;

z-index:+10;

}

* html .gb_fixed {position:relative;}

#hidden_gb2 {

display:none;

border:3px solid #F70415;

background: #FC6A84;

right:10px;

padding:10px;

padding-top:20px;

}

</style>

<div class="gb_fixed">

<table id="hidden_gb2" cellpadding="0" cellspacing="0">

<tr><td>

MASUKKAN CODE SHOUTBOX DI SINI

<div><center><a href="javascript:void(0)" onclick="gb_showHideGB()">

<img src=" URL BUTANG CLOSE "/></a></center></div>

</td></tr></table>

</div>

<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>

<div style="z-index:+5" class="gb_fixed">

<a href="javascript:void(0)" onclick="gb_showHideGB()">

<img src=" URL BUTANG SHOUTBOX "/></a>

3. Tukar benda berikut :

MASUKKAN CODE SHOUTBOX DI SINI : Code shoutbox korang, register sini kalau tak ada.

URL BUTANG CLOSE : url link butang close

URL BUTANG SHOUTBOX : url butang shoutbox

#F70415 : warna border

#FC6A84 : warna background

penting! kalau nak kotak shoutbox korang cun, pastikan width=300 height=380 untuk coding shoutbox korang.

3. Tukar benda berikut :

MASUKKAN CODE SHOUTBOX DI SINI : Code shoutbox korang, register sini kalau tak ada.

URL BUTANG CLOSE : url link butang close

URL BUTANG SHOUTBOX : url butang shoutbox

#F70415 : warna border

#FC6A84 : warna background

penting! kalau nak kotak shoutbox korang cun, pastikan width=300 height=380 untuk coding shoutbox korang.

Butang Close

http://img853.imageshack.us/img853/2691/close1.png

 

http://img140.imageshack.us/img140/491/close2.png

Butang Shoutbox

http://img851.imageshack.us/img851/4188/38699752.png

http://img194.imageshack.us/img194/3298/69700921.png

http://img42.imageshack.us/img42/7232/88395690.png

 

http://img171.imageshack.us/img171/328/47767934.png

http://img819.imageshack.us/img819/9859/31476268.png

http://img839.imageshack.us/img839/2508/75767599.png

http://img193.imageshack.us/img193/3088/34701580.png

http://img543.imageshack.us/img543/3646/98111590.png

---

♥ Terima Kasih Kerana Sudi Membaca Entry Lynn Ainz ! Like Kalau Suka ! ♥

---