ilustrasi chatbox sandaljepit.ml
Hai sobat sandaljepit, setelah membuat postingan tentang kesehatan selanjutnya saya akan membuat sebuah tutorial sederhana yang mungkin dapat menambah informasi untuk sobat sandaljepit, lumayan sekalian buat nambah-nambah postingan. untuk selanjutnya tentang tutorial MEMBUAT SHOW HIDE CHATBOX, ikuti langkah-langkah berikut ini sobat :
- Login ke dashbor blogspot sobat.
- Lalu beralih ke tata letak
- Lalu sobat klik "tambahkan gadget"
- Setelah itu sobat pilih HTML/Javascript
- Kemudian sobat masukan kode dibawah ini
<style type="text/css">
#at{
position:fixed;
right:450px;
z-index:+1000;
}
* html #at{position:relative;}
.attab{
height:autopx;
width:autopx;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:left;
border:2px solid #FF0000;
background: #F5F5F5;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:5px;
-moz-box-shadow: 0px 2px 5px 0px #FF0000;
}
</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:#F5F5F5;">
<!-- Taruh kode chat box sobat Disini -->
</div>
</div>
<div align="center"><a href="javascript:void(0);" onclick="showHideAT()"><input type="button" value="Close" class="close" /></a>
</div>
</div></div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script>
<div style='display:scroll; position:fixed; top:80px; right:0px;'><a href="javascript:void(0);"onclick="showHideAT()"/><img src="http://1.bp.blogspot.com/-dsspRx_lf3M/TvvZ4De97aI/AAAAAAAAAAw/PTp1z_YvqJE/s1600/Chat+Book.png" /></a>
</div>
- Setelah itu simpan dan coba refresh blog sobat tadi.
NOTE :
- Ganti tulisan yang berwarna merah dengan kode chatbox sobat
- Jika sobat ingin merubah warna garis ganti kode warna biru
- Jika sobat ingin merubah tab picture ganti kode warna pink
- kode yang berwarna hijau itu adalah warna dari backroundnya
- jika sobat tidak tahu kode-kode warna bisa cari digoogle, karena saya belum update kode warnanya diblog ini
Semoga postingan ini membantu untuk sobat sekalian, terimakasih atas kunjungan sobat sandaljepit. Jika sobat bingung bisa tanyakan dikolom komentar yah.
1 comments:
Write commentsmantap gan !!
ReplyEmoticonEmoticon