Thursday 23 December 2010

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.



tutorial daftar dan letak shoutbox pada 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



tutorial daftar dan letak shoutbox pada blog


3. Masukkan maklumat yang dikehendaki.(maklumat akan dihantar ke email untuk simpanan)
tutorial daftar dan letak shoutbox pada blog


4. Masukkan setting yang berkaitan. Biasanya melibatkan style & color dan date & time.
tutorial daftar dan letak shoutbox pada blog


5. Setelah selesai memasukkan setting yang dikehendaki dalam langkah 4,klik pada 'get codes'
tutorial daftar dan letak shoutbox pada blog


6. Masukkan lebar dan tinggi yang dikehendaki didalam blog anda. Kemudian copy code berkenaan.
tutorial daftar dan letak shoutbox pada blog


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

0 comments:

Post a Comment

err..komen laa...hehe

Related Posts Plugin for WordPress, Blogger...

Subscribe Now

tinggalkan tapak tangan anda

Powered by Blogger.