cara letak chatbox shoutmix dan sembunyikannya

Meletakkan sesebuah shoutbox dalam menggalakkan interaksi antara pemilik blog dengan pengunjung sesebuah blog. Interaksi ini mudah kerana ianya tidak melibatkan komen pad aentri, tetapi pesanan yang ditinggalkan pada gadjet shoutbox yang di'pasang' oleh pemilik blog.





Terdapat pelbagai jenis shoutbox yang ada untuk diletakkan dalam sesebuah blog. Antara yang dicadangkan untuk diletakkan dalam sesebuah blog adalah shoutbox daripada shoutmix.com.

Tutorial ringkas ini akan menerangkan cara untuk mendaftar shoutmix, dapatkan kod html dan letakkan pada blog.

1. Buka web www.shoutmix.com

2. Klik pada create shoutbox





3. Masukkan maklumat yang dikehendaki.(maklumat akan dihantar ke email untuk simpanan)


4. Masukkan setting yang berkaitan. Biasanya melibatkan style & color dan date & time.


5. Setelah selesai memasukkan setting yang dikehendaki dalam langkah 4,klik pada 'get codes'


6. Masukkan lebar dan tinggi yang dikehendaki didalam blog anda. Kemudian copy code berkenaan.


7. Setelah copy code, paste pada html/javascript dalam blog anda ( Dashboard>layout>add a gadget>html/javascript)

selamat mencuba ;)

updated.. kalau nak hidekan, tambah kod di bawah 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/AVvXsEj_GiqZ1NVOxmLrkKFurx81mqiuP_GJyLmf_iMNjrU_ToKNfalknQVsLOhghlQiBA-1oU6Ydy_RD4_bzYigIxFEBgfBFTSnXbfHtIJyKN5PJ7VE0_g3Yt3xazNCjhcTeN0j1v9SyB0XG6Kk/s320/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">

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="yeahyeahgogo" src="http://www1.shoutmix.com/?yeahyeahgogo" width="160" height="400" frameborder="0" scrolling="auto">

<a href="http://www1.shoutmix.com/?yeahyeahgogo">View shoutbox</a>

</iframe>

<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />

<!-- End ShoutMix -->

<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>

p/s : tukar kod merah itu dengan kod shoutmix anda..