Tutorial : Hidden chatbox dengan pic

Assalamualaikum

HUK3*BATUK*..nie tutorial kepada anak mama,cik  piqa yang nak try buat hidden chatbox dengan gambar yang comel tu.Camne nak buat?

TUTORIAL

  1) Dashboard > design > add gadget  > HTML code

 2) masukkan kod kat bawah nie eh lam ruangan code

<style type="text/css">
#gb{position:fixed;top:50px;z-index:+1000;}* html #gb{position:relative;}
.gbtab{height:350px;width:140px;float:left;cursor:pointer;background:url('URL PIC YANG KORUNK SUKA') no-repeat;}.gbcontent{float:left;border:2px solid #00000;background:#F5F5F5;padding:10px;}</style>
<script type="text/javascript">function showHideGB(){var gb = document.getElementById("gb");var w = gb.offsetWidth;gb.opened ? moveGB(0, 150-w) : moveGB(170-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 CHATBOX ATAU APA2 BOX KORANG KAT 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 = (140-gb.offsetWidth).toString() + "px";</script>

 3) yang kaler merah tu masukkan image URL yang cute2 atau Cool..nanti keluarlah gambar tu kat page blog korang.korang boleh cari menggunakan kata kunci "shoutbox icon" atau cari di photobucket..atau,upload sendiri rekaan design anda


4) Saiz tu ikut kesesuaian masing-masing


5) Dan akhirnya,click SAVE


6) DONE!