Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template

Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog

Saya akan membahas Cara memasang ChatBox Hide Show berada di kanan blog anda atau berada di kiri blog anda. Tadi saya sudah update Cara Memasang Chat Box di Blog tetapi kali ini saya hanya menerangkan untuk memasang ChatBox berada di kiri/dikanan blog anda.

Saya melihat banyak comment di blog blog lain , "Gimana cara Chatbox Shoutmix berada di kiri blog ?" itu comment yang saya sering lihat, maka dari itu saya akan share cara memasang Chatbox berada di kanan maupun di kiri.

Langsung aja ya ke langkah langkahnya..
1. Login ke Blogger
2. Klik Rancangan => Tambah Gadget => HTML/Javascript
3. Lalu masukkan salah kode dibawah ini :
Left Hidden Chatbox 
<style>  #hcl {  position:fixed;top:100px;  left:0px;  z-index:+1000;  }  * html #hcl {position:relative;}  .hcltab {height:100px;width:30px;  float:left;  cursor:pointer;  background:url('http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/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"><!-- KODE SHOUTMIX ANDA DISINI -->  <br />  <div class="hc-credit">  <span style="float:left">  <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->  [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
<style>  #hcr {  position:fixed;top:100px;  z-index:+1000;  }  * html #hcr {position:relative;}  .hcrtab {height:100px;width:30px;  float:left;  cursor:pointer;  background:url('http://b.imagehost.org/0611/buku-tamu.png') no-repeat;  }  .hcrcontent {  float:left;  border:2px solid #003e82;  background:#f3f6f7;  padding:10px;  }  .hc-credit {font-size:9px}  .hc-credit a {text-decoration:none}  </style>  <script type="text/javascript">  function showHidehcr(){  var hcr = document.getElementById("hcr");  var w = hcr.offsetWidth;  hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);  hcr.opened = !hcr.opened;  }  function movehcr(x0, xf){  var hcr = document.getElementById("hcr");  var dx = Math.abs(x0-xf) > 10 ? 5 : 1;  var dir = xf>x0 ? 1 : -1;  var x = x0 + dx * dir;  hcr.style.right = x.toString() + "px";  if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}  }  </script>  <div id="hcr">  <div class="hcrtab" onclick="showHidehcr()"> </div>  <div class="hcrcontent"><!-- KODE SHOUTMIX ANDA DISINI -->  <br />  <div class="hc-credit">  <span style="float:left">  <!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->  [close]  </a>  </span>  </div>  </div>  </div>  <script type="text/javascript">  var hcr = document.getElementById("hcr");  hcr.style.right = (30-hcr.offsetWidth).toString() + "px";  </script> 
Baca juga Tips untuk memunculkan Blog kita di Search Engine
Terima kasih telah membaca artikel tentang Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog di blog Tutorial Kewez jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel.
Gunakan Tombol Balas jika ingin membalas Komentar agar susun komentar lebih terstruktur
Kode Emoticon :) :( =( ^_^ :D =D |o| @_@ ;) :-bd :-d :p =)) :goodluck: :O