Membuat ChatBox Melayang (Left)

Setelah ane share Cara Membuat ChatBox, sekarang ane akan share trik cara Membuat ChatBox Melayang di sisi kiri blog seperti yang ada di blog Ane. Membuat chatbox melayang juga sering disebut dengan Hidden ChatBox. Ane tegaskan lagi ChatBox adalah buku tamu yang mana anda bisa berchat ria denga pengunjung blog. Gak usah lama-lama, simak tutorial Membuat ChatBox Melayang (Left) dibawah ini.



Screenshot dari Blog ane :



Caranya :

  • Copy kode dibawah ini.

<!-- right hidden chatbox byhttp://zlems-creative.blogspot.com/START -->
<style>
#hcl {
position:fixed;
top:35px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV6hNMGMH3A_97zD1gYh0cq7eOYGitgAqsAeImiytNLiEj8se6rrVKM6mBTMPy3gA-600DgYajbW6CZ6O_EPU7ZLLVFfdghT_NDOrOp8nxHghMGVpwiSF12cNOI_hswresJd7Na8MVo80/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">
 LETAKKAN KODE CHATBOX ANDA DISINI
<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
Get this
<a href=http://zlems-creative.blogspot.com/2012/06/membuat-chatbox-melayang-left.html
target="_blank">
Widget</a>.
By:
<a href=http://zlems-creative.blogspot.com/
target="_blank">
Zlems Creative™
</a>
</span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[CLOSE]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div>

</div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://zlems-creative.blogspot.com/END -->

Keterangan :
  1. Ganti yang berwarna Biru dengan url blog sobat.
  2. Letakkan kode Chatbox sobat pada kode yang berwarna Merah.
------------------------------------------------------
  • Lanjut, Sign In di blog anda, jangan di blog ane yah, hehe.
  • Pilih Rancangan -> Tata Letak -> Tambah Gadget.
  • Pastekan Kode Diatas, lalu Save.
  • Lihat Blog Sobat. Taaraaa...... ChatBox melayang sudah terpasang diblog sobat.

Catatan :

Bagaimana..?? Mudah Bukan. Selamat Mencoba...

Semoga Bermanfaat...

Admin - Zlems Creative

NOTE :
Bagi Anda yang akan download file, Anda akan diarahkan ke Adf.ly kemudian tunggu 5 detik dan klik tombol SKIP AD / LEWATI yang berada di sebelah kanan atas monitor Anda. Terima Kasih.

Get Free Email Updates Daily!

Follow us!

Baca Juga Ini :


2 comments:

  1. ijin pake script chatboxnya gan, makasih sebelumnya ...

    ReplyDelete
    Replies
    1. ok,,,monggo sob.....
      thanks udah mampir.....

      Delete

Kritik dan Sarannya di Tunggu...
Jangan Bekomentar Spam yah... ^_^