Cara Memasang Shoutmix Chat Melayang di Blogspot

Bagi Teman-teman yang hobi BW (blog walking) mungkin widget shoutmix merupakan salah satu widget wajib bagi anda. Kenapa? karena dengan menggunakan widget ini kita bisa meninggalkan jejak satu sama lain yang mempermudah kita untuk melacak siapa saja yang sudah singgah ke dalam blog kita.

Yang jadi masalah adalah dengan penempatan shoutmix ini akan memenuhi sidebar blog kita. Tapi ini bisa kita akali dengan menggunakan shoutmix chat melayang di blogspot. Tetap eksis tanpa mengurangi fungsionalitas. Walaupun saya sendiri memiliki pengalaman yang kurang baik dengan shoutmix chat tapi apa salahnya jika saya berbagi tutorial cara memasang shoutmix chat melayang di blogspot.

Berikut beberapa cara simple yang bisa digunakan.

• Langsung ke TKP dashbord =>> rancangan
• Klik tambah gadget.
• Selanjutnya pilih HTML/Java Script.
• Masukkan kode script 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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
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">

MASUKAN KODE CHATBOX ANDA DI SINI


</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

• Simpan pekerjaan anda dan lihat hasilnya

Edit yuk:

• kode url (yang berwarna biru) dapat dirubah dengan gambar milik anda sendiri.
• height:100px; (ganti nominal 100 untuk menentukan panjang widget bukan panjang shoutmixnya. Lebih baik disesuaikan)
  width:30px; (ganti nominal 30 untuk menentukan lebar)
  float:left; (left untuk pemasangan di kiri, right untuk kanan)
• Jangan lupa masukan kode shoutmix  anda.

Selamat mencoba dan salam sukses. (bisa juga diterapkan di wordpress)