Home » » Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog

Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog

Written By wonk bejho on Kamis, 18 Januari 2018 | 11.57

Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog
Cara Memasang ChatBox Hide Show Kanan/Kiri di Blog

Assalamualaikum wr wb,
Halo sobat BLOG WONK BEJHO kali ini saya akan membahas Cara memsang ChatBox Hide Show berada di kanan blog anda atau berada di kiri blog anda.. Ini sebagai sarana berinteraksi dengan Admin Blog secara lebih cepat. Biasanya di gunakan pada Blog yang berbasis Layanan.

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 saja ya ke langkah langkahnya..

Script kotak chating tersembunyi ini mempunyai 2 macam yang pertama script kotak chating tersembunyi di kiri dan yang kedua di kanan.


Sebelah kiri blog

<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>
<br />
<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 -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></a></span>
</span>
<span style="float: right;">
<a href="javascript:showHidehcl()">
[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>


Sebelah kanan blog
<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>
<br />
<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 -->
<span style="font-size: 100%;">
<span style="color: red;"> Get this</span>
<a href="http://www.m-azka.com/2011/02/cara-memasang-chatbox-hide-show.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign1</span>
</a>
<span style="color: red;"> or</span>
<a href="http://www.m-azka.com/2011/04/membuat-floating-widget-chatbox.html" target="_blank">
<span class="Apple-style-span" style="color: orange;"> Desaign2</span></a></span>
<span style="float: right;">
<a href="javascript:showHidehcr()">
[close]
</a>
</span>
</span></div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>


 Keterangan:

Kalau Belum Punya Masuk Ke sini : Cara membuat Chat / Kotak Chatting Shoutmix
#hcr {
position:fixed;top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
z-index:+1000;
}
.hcrtab {height:100px; /* tinggi tab pembuka hidden chatbox */width:30px; /* tinggi tab pembuka hidden chatbox */
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png') no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
}

.hcrcontent {
float:left;
border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
padding:10px;
}


-- selamat mencoba --

Share this article :

0 komentar:

Posting Komentar

Popular Posts

Diberdayakan oleh Blogger.
 
Support : Copyright © 2013. BLOG WONK BEJHO - SEO Inovation 2018 - All Rights Reserved
Template Created by Creating Website Published by Mas Template