RSS
Twitter
Facebook
YouTube
Google+
Cari Artikel Disini!!!

Back to top

Membuat BukuTamu/ChatBox melayang show/hide

sudah lama saya ga share nih gan ,sibuk karna sakit -_- nih gan walaupun saya sakit nih saya mau share yang berjudul ,membuat ChatBox melayang hide/show :D
dengan menggunakan ini pasti chatbox agan terlihat keren deh :D hahaha
dan tidak akan mengganggu penglihatan pengunjung yang pastinya :)
sudah jelaskan gan picture yang di tunjuka di samping kiri ini :)
yo langsung saja gan dari pada saya ngomong terus yang tidak jelas yu kita langsung saja ke pokok utamanya, yang jelas adalah intinya dari post ini :D
haduh saya lagi males ngetik panjang nih gan yuk langsung aja nih cara nya :)



  • Pertama Login dulu yah gan :)
  • lalu ke Tata Letak ---
  • tambah widget baru ---
  • pilih yang  HTML/JavaScripts ---
  • lalu masukan kode brikut ini ---


<style type="text/css">
#emicbox{
position:fixed;
top:120px;
z-index:+1000;
}* html #emicbox{position:relative;}
.emicboxtab{
height:150px;
width:50px;
float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSFxPlBHzHMRgpGxJxo9rVVEZOQfAquAIxoyMTJdqJSz2Nmbxp9TEpaw06q8RLk7kqSrhexuFfsaOAikR9C3-pU8WtmasEIDAl_MkuiLuNxJrQJpgX_QE99EoH_ngwxmprcMyxg13-9IQ/s1600/buku+tamu+emi.png') no-repeat;
}
.emicboxcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: rgba(0, 0, 0, 0.5); url() no-repeat bottom;
padding:10px;border-radius:8px;
}
</style>
<script type="text/javascript">
function showHideemicbox(){
var emicbox = document.getElementById("emicbox");
var w = emicbox.offsetWidth;
emicbox.opened ? moveemicbox(0, 51-w) : moveemicbox(30-w, 0);
emicbox.opened = !emicbox.opened;
}function moveemicbox(x0, xf){
var emicbox = document.getElementById("emicbox");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
emicbox.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveemicbox("+x+", "+xf+")", 5);}
}</script>
<div id="emicbox">
<div class="emicboxtab" onmouseover="showHideemicbox()"> </div>
<div class="emicboxcontent">
<center>

ISI CHATBOX ANDA DISINI

<br />
</center><span style='font-size:10px;color:#fff;float: right;'><a href='http://helmimochamaddarusman.blogspot.com'>-=[widget here]=-</a></span></div>

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

</div>

Notice!
  • sekian dulu yang saya share untuk kali ini yah gan ,jangan lupa like fanspage ane yah gan yang ada di halaman HOME :D
  • ganti tulisan yang berwarna merah dengan chatbox anda sendiri


Post a Comment

Peraturan Berkomentar :
✔ Berkomentarlah Sesuai Artikel Diatas
✔ Berkomentarlah Menggunakan Bahasa Yang Jelas
✔ Relevan
✔ Sopan
✖ SPAM
✖ Link Aktif (Live Link)
✖ Promosi (Iklan)
✖ OOT (Out Of Topic)



| Copyright 2014 By : SF-Destroyer | Template Created By : Helmi Mochamad Darusman