Cara Membuat Chat Box Muncul Dari Atas

Kali ini saya akan membagi tips dan trik "Cara Membuat Chat Box Muncul Dari Atas".  Gak Pake Lama langsung aja Dach...


  • Login blogger
  • Rancangan, Tambah Gadget,  Html/java script
  • Dan Simpan kode berikut  :
Kode Script
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #999;
background: #000;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
-moz-box-shadow: 0px 2px 5px 0px #f8f9b9;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:#000;">


<!-- Simpan Kode cbox atau shoutmix nya disini -->


</div>
</div>

<br />
<div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzLuH_F1WBWjweX1osEi-V-K8yuyZh1TcsEosXPMCRj1sY-77-iTa00SjJdEUxjKNU0RvugVss-_vqpWXZ99GEe3DJi1_p5tWKeq8MK4UejQGRjOXtRCdAGJHmWza_E1LIs8fKrJUxwLS/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>

</div></div>


<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>

<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTicLfhDszyj8Z4JUe-GGkl5D3goxOyGHATbNDJxDo8NE8FCBewjCZvIKgPqnpQOo9yWNYXnbbaAkijgh88z7uveKAZOU2QMKTxnHGaqsGM_esVTF9IBdlbmgVbNJcv3ekpkVf5ZWTXzR_/s1600/Chatbox.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Catatan:
Jika ingin menampilkan posisi Tombol di samping seperti Blog saya ini, Tinggal ganti Kode di bawah ini
<center><a href="javascript:void(0);"onclick="showHideAT()"/><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTicLfhDszyj8Z4JUe-GGkl5D3goxOyGHATbNDJxDo8NE8FCBewjCZvIKgPqnpQOo9yWNYXnbbaAkijgh88z7uveKAZOU2QMKTxnHGaqsGM_esVTF9IBdlbmgVbNJcv3ekpkVf5ZWTXzR_/s1600/Chatbox.png" alt="cbox" title="Click here to open Guest Book" /></a></center>

Dengan Kode di bawah ini
<div style='display:scroll; position:fixed; top:20px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTicLfhDszyj8Z4JUe-GGkl5D3goxOyGHATbNDJxDo8NE8FCBewjCZvIKgPqnpQOo9yWNYXnbbaAkijgh88z7uveKAZOU2QMKTxnHGaqsGM_esVTF9IBdlbmgVbNJcv3ekpkVf5ZWTXzR_/s1600/Chatbox.png"  /></a>
</div>

Semoga Berhasil.....

4 comments

17 April 2011 pukul 00.24

Tutorialnya mantap :) Lanjutkan ...

17 April 2011 pukul 20.29

@Ronny Dee..makasih gan.......

16 September 2015 pukul 06.17

Saya sangat berterimakasih banyak kepada EYANG WORO MANGGOLO atas bantuannya saya bisa menang togel 4D nya..saya ingin berbagi cerita kepada semuanya bahwa saya ini cuma seorang TKI dari malaysia dan saya cuma bekerja sebagai pembantu,tentunya anda tau kalau pembantu itu gajinya tidak seberapa dan saya kepengen pulang kampung tapi gaji saya tidak cukup akhirnya saya coba pinjam keteman saya,dia pun juga tidak punya uang dan saya pindah lagi keteman yang lain dia pun juga tidak punya,,akhirnya teman saya memberikan nomor telpon EYANG WORO MANGGOLO dan katanya ini paranormal sangat terkenal yang banyak membantu orang dalam mengatasi masalah,dengan penuh semangat saya langsun menghubungi EYANG WORO MANGGOLO dan ALHAMDULILLAH saya diberikan anka yang benar-benar tembus dan berkat bantuan EYANG WORO MANGGOLO saya sudah bisa berkumpul kembali dengan keluarga saya dikampung,,jika anda sangat membutuhkan bantuan..jangan anda ragu silahkan hubungi saja EYANG WORO MANGGOLO di 082=391=772=208 karna beliau meman benar-benar paranormal yang bisa dipercaya dan yang punya room terimah kasih banyak atas tumpangannya.

29 Desember 2015 pukul 01.48

KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل


KAMI SEKELUARGA MENGUCAPKAN BANYAK TERIMA KASIH ATAS BANTUANNYA MBAH , NOMOR YANG MBAH BERIKAN/ 4D SGP& HK SAYA DAPAT (350) JUTA ALHAMDULILLAH TEMBUS, SELURUH HUTANG2 SAYA SUDAH SAYA LUNAS DAN KAMI BISAH USAHA LAGI. JIKA ANDA INGIN SEPERTI SAYA HUB MBAH_PURO _085_342_734_904_ terima kasih.الالله صلى الله عليه وسلموعليكوتهله صلى الل

Posting Komentar - Back to Content