Tutorial Hide Shoutbox/Chatbox

بسم الله الرحمن الرحيم

Assalamualaikum...selamat pagi semua. Ceria-ceria selalu..senyum sokmo Kali ni macam biasa la..nak buat tutorial lagi. hehe..Nak tau tutorial ape, jom tengok gambar kat bawah ni..

Comel kan kucing ni..main sorok-sorok pulak die. hehe..Gambar ni tak ade kaitan p0n, saje je nak letak. Saya nak buat tutorial hide shoutbox/chatbox..shoutbox main sorok-sorok macam kucing kat atas.

Tutorial ni request daripada rakan blogger kita..Linda, Anis & Faten. Kalau ade nama yang tak ditulis tu, harap maaf ye..sebab kadang-kadang ramai sangat yang minta, saya p0n dah tak ingat dah. Maaf...

Saya akan ajar buat hide shoutbox macam saya punye box kat tepi tu eh..

1. Macam biasa, log in dulu

2. Design -> Add a gadget -> HTML/Javascript

3. Copy kod ni..ctrl+c untuk copy

<style type="text/css">

.gb_fixed{

position:fixed;

top:70px;

right:0px;

z-index:+10;

}

* html .gb_fixed {position:relative;}

#hidden_gb2 {

display:none;

border:2px solid #004831;

background:#000000;

padding:10px;

padding-top:0px;

}

</style>

<div class="gb_fixed">

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

<tr><td>

<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:pink">[Tutup]</b></a></div>

KOD SHOUTBOX/CHATBOX DI SINI

</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 border="0" style="border:0px" src="URL GAMBAR" />

</a>

</div>

4. Jom tengok kod-kod yang boleh diubah..

top -> semakin besar nombor, semakin ke bawah

border -> semakin besar nombor, semakin tebal. boleh juga tukar warna dan boleh tukar nak solid, dotted atau dashed.

background -> boleh ditukar juga. klik laman web ni Color Charts dan Color Codes.

perkataan [Tutup] -> boleh ditukar

color:pink -> boleh ditukar juga..warna untuk perkataan Tutup tadi.

Url Gambar -> Boleh ambil gambar mana-mana je. Kat Glitter Graphic, Emoticons dan kalau nak letak gambar sendiri pon boleh. Tapi kena upload dulu di imageshack.us. Kemudian ambil direct link, letak di bahagian Url Gambar tu eh..

5. Kalau dah siap, save la..

Go0d Luck !!

والسلام

---

Syukran kerana sudi membaca..boleh Like dan Share entri ini

---