Tutorial Cantikkan Shoutbox

Halo semua ok sekarang tanpa berlengahkan masa Azhunk nak kongsi satu Tutorial iaitu tutorial nak kasi shoutbox korang kelihatan bergaya dan cantik sangat. Ni bukan Tutorial nak buat shoutbox ada background same ngan orang ramai wat tetapi ni design sendiri haha.

Pasti takkan pernah jumpa tutorial ni sebab Azhunk godek2 sendiri kod dia then terkejut tengok2 result dia agak memuaskan. Kalau korang nak tengok sangat layan gambar kotak jerit di bawah. Azhunk punye kotak jerit ni yang floating punye.

Hebat tak ? ok tengok step dibawah.

Step 1

Dashboard >> Design >> Add a gadget >> HTML/Javascript

Step 2

Ambil kod dibawah lalu paste di dalam ruangan HTML/Javascript (Disarankan jangan tulis ape-ape dekat Title ruangan HTML/Javascript.

<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:3px ridge HTML border;
-moz-border-radius: 50px 50px;
border-radius: 50px 50px;
background:HTML background;
-moz-box-shadow: 0px 0px 20px HTML bayang;
-webkit-box-shadow: 0px 0px 20px HTML bayang;
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:cyan"><img src="http://i97.photobucket.com/albums/l231/lcwolfman/Forum/icons/icon_close.png"/></b></a></div>

KOD SHOUTbox ANDA

</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/Ikon Shoutbox" align="center" />
</a>
</div>

KOD Diubah :

HTML border : HTML Warna bagi border ye
HTML background : HTML Warna bagi background
HTML bayang : HTML Warna bagi bayang2
KOD Shoutbox ANDA : Kod Shoutmix
URL Gambar/Ikon Shoutbox : URL Gambar IKON yang floating tu ye

Perkara yang kena buat :

Pastikan width dan height kotak jerit : 200 (width) 300 (height)
Pastikan HTML background sama dengan background Kotak Jerit.

Nak tukar background ? Pergi ke Kotak Jerit .

Login >> Style & Colors >> bawah kotak General dia ada tulis background. Tukar sahaja kod warna dia kasi sama dengan kod HTML background ye.

Rujukan kod Warna : SINI