Membuat Toggle Customer Service Munculan dari Samping

Membuat Toggle Customer Service Munculan dari Samping - Agar toko online terlihat lebih cantik, diperlukan juga memasang toggle customer service munculan. Toggle ini bisa dimunculkan dan disembunyikan dengan klik, maksudnya agar bisa menghemat ruang dan terlihat lebi animatif.

Langsung saja deh lihat screen shot di bawah ini untuk yang dimaksud dengan toggle munculan Customer service ini.

LIVE DEMO

Info Customer service akan muncul penuh saat diklik toggle tersebut.

Berikut cara pemasangannya :

1. Masuk ke dashboard blog anda.

2. Masuk ke tab layout / tata letak

3. tambahkan widget baru

4. Cari Widget HTML/Javascript

5. Copy dan paste kode script dibawah ini ke dalam widget HTML/Javascript tadi.

<style type="text/css">
#gb{
position:fixed;
top:180px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjllEoY-FtO8lZ3Ka0E-Foh2EuDXdGae0F-9KPFaWLptz4wRK3NVUL_pQmU4C8WS14g2YHfaWxxcJZxwq8ryoIbDjJCgOp4u-2ETWA2NJLQ4esGix7pFAoljWs7O5C-46Nbrj4OKQzqLu2Z/s130/cs%2520toggle.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#000;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent"><center><b><font color="#fff">Kontak Kami : <br/>(SMS/WA)<br/>08975858889<br/>
<br/>Pin BBM : 286ABA7B</font></b>
</center>
<div style="text-align:right">
<a href="javascript:showHideGB()"><small>
<font color="yellow">X Closed</font></small>
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

 
Keterangan : Test berwarna merah bisa anda ganti dengan data kontak anda sendiri.

6. Save Widget HTML/Javascrit Anda.
7. Refresh blog dan lihat hasilnya.

Jika panduan di atas sudah dilakukan dengan benar, seharusnya toggle customer service sudah muncul di sisi kanan blog anda. Toggle ini bisa membuat toko online anda terlihat lebih atraktif dan keren.

Tweet