CARA MEMBUAT HIDDEN CHAT BOX

banyak pertanyaan muncul, gimana sih kk caranya buat hidden chat box seperti gambar diatas atau di sebelah kanan blog ini.
cara kerjanya adalah chat box akan sembunyi dibalik tulisan chat. kemudian apabila diklik maka chat box akan keluar secara perlahan dari sebelah kanan atau tempat persembunyiannya.

langsung aja gpl

1. masuk ke menu layout

2.pilih add a gadget

3. kemudian pilih html/javascript

4. copy dan paste code di spoiler ini kedalam html/javascript gadgetnya

Spoiler:

<style type="text/css">
#CilukBa_bgsGR{position:fixed;top:50px;z-index:+1000;}
* html #CilukBa_bgsGR{position:relative;}
.CilukBa_bgsGRknop{height:145px;width:33px;float:left;cursor:pointer;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx2z7JfoEWctrDNoQjGCPjlQ6eKX5z0CC44tMiPkfJqqbhOWkDlnkc-wG55ohH1i6kZ4bRwc0PtqxytAcaQ6QD06rQqNrfrjm20JHdKXmaYzsV2JEWXTxtBFsKzzOmoWpDqXuE4nlKvbc/s1600/sad.PNG) no-repeat;}
.CilukBa_bgsGR_SB{float:left;border:2px solid #022f81;background:#75a3f8;padding:3px;}
</style>

<script type="text/javascript">
/* gubhug reyot * bloggerstars1 - bgs1GR */
function Ciluk_ba_bgsGR(){
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var w = CilukBa_bgsGR.offsetWidth;
CilukBa_bgsGR.opened ? moveCilukBa_bgsGR(0, 30-w) : moveCilukBa_bgsGR(20-w, 0);
CilukBa_bgsGR.opened = !CilukBa_bgsGR.opened;}
function moveCilukBa_bgsGR(x0, xf){
var CilukBa_bgsGR = document.getElementById("CilukBa_bgsGR");var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;
CilukBa_bgsGR.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveCilukBa_bgsGR("+x+", "+xf+")", 10);}}
</script>

<div id="CilukBa_bgsGR">
<div class="CilukBa_bgsGRknop" onclick="Ciluk_ba_bgsGR()"> </div>
<div class="CilukBa_bgsGR_SB">

masukkan kode chat box disini

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

5. simpan/save

ARTIKEL TERKAIT: