Jumat, 20 Agustus 2010

Tips Cara Pasang Chatbox Hidden di Blogger

Put your own text in this speech bubble
Tips Cara Pasang Chatbox Hidden di Blogger. Caranya sangat mudah sekali, Trik Hidden Chatbox ini terbagi menjadi 2 pilihan, yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut kodenya:


<!-- right hidden chatbox by http://budiantobjm.blogspot.com START -->
<style>
#hcr {
position:fixed;
top:150px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmgOWfcOVTcNffrtTTqpi5XM8ygX5EW334g9Zoh_5U7UmQJuNDES77Nr9qEfEfEwE6ElN-wuM2Y6gEzuzOu-1kcfHydsSxHp56Rm7hURIrC1sZk86azvNKNNBjbWlbIdgD9UbSWxp9yoQ/s400/cbblue-2-LEFT.png') no-repeat;
}
.hcrcontent {
float:right;
border:2px solid #A9D0F5;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">
<center><blink><span style="font-weight:bold;">Tinggalkan Pesan Anda</span></blink></center><br />
< MASUKKAN CODE SCRIPT CBOX ANDA -->

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
<a href="http://gadogadorahma.blogspot.com/2010/01/hidden-chatbox.html" target="_blank">
Get this widget!
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://budiantobjm.blogspot.com END -->

sekarang kita pasang kode itu di blog. Udah tahu caranya kan ???? Itu, pilih Rancangan > Page Elements > HTML/Javascript, lalu masukkan kode Hidden Chatbox diatas.
Catatan: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang Cbox.

2 komentar: