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.
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,
Langsung saja deh lihat screen shot di bawah ini untuk yang dimaksud dengan toggle munculan Customer service ini.

Info Customer service akan muncul penuh saat diklik toggle tersebut.
Berikut cara pemasangannya :
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">Keterangan : Test berwarna merah bisa anda ganti dengan data kontak anda sendiri.
#gb{
position:fixed;
top:180px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:130px;
width:30px;
float:left;
cursor:pointer;
background:url('https://lh5.googleusercontent.com/-Qdo9CDkzSGc/U_6pRDSKE7I/AAAAAAAAAcc/RRuavgltqCM/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/>
08123456789<br/>
<br/>
Pin BBM : 123abcde</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>
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,
THANKS GAN ANDA MEMANG KEREN
BalasHapusmantabs gan...ilmunya sangat bermanfaat..mudah2han blog Agan makin rame
BalasHapusgan kalau di sebelah kiri giman gan,please
BalasHapusMantap gan...... dah berhasil dipasang diwebsite ane nih, tambah kereeeeeen
BalasHapustutorial agan mantap benerrrrr, maknyoosss (h)
gan klo di simpan di samping kiri gmn y? tengkiw
BalasHapuskl untuk social network apa yg hrus ditambhkan gan ?
BalasHapusterima kasih gan
BalasHapusok ternyata saya dapatnya disini apa yang saya butuhkan..
BalasHapusbagus banget gan..ijin pake gan :-bd
Terima kasih gan info nya
BalasHapus