Membuat Toggle Customer Service Munculan dari Samping

9/06/2014

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.


toggle munculan customer service



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://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>
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,

All posts here about online store, tips, tricks, SEO, Store Service, store builder with Blogspot, Wordpress or Opencart.
Contact me if You need help or more question about service. Enjoy reading.....

Artikel Terkait

Previous
Next Post »

7 komentar

Write komentar
25 Oktober 2014 12.52 delete

THANKS GAN ANDA MEMANG KEREN

Reply
avatar
3 November 2014 20.47 delete

mantabs gan...ilmunya sangat bermanfaat..mudah2han blog Agan makin rame

Reply
avatar
13 November 2014 22.06 delete

gan kalau di sebelah kiri giman gan,please

Reply
avatar
29 November 2014 18.49 delete

Mantap gan...... dah berhasil dipasang diwebsite ane nih, tambah kereeeeeen
tutorial agan mantap benerrrrr, maknyoosss (h)

Reply
avatar
4 Mei 2015 06.32 delete

gan klo di simpan di samping kiri gmn y? tengkiw

Reply
avatar
poetensai
AUTHOR
12 Juni 2016 00.15 delete

kl untuk social network apa yg hrus ditambhkan gan ?

Reply
avatar

#/ Dilarang melakukan SPAM.
#/ Dilarang Komentar mengandung Link/URL di kolom komentar
#/ Dilarang Komentar SARA dan Makian
#/ Dilarang ngiklan
Melanggar ketentuan di atas, komentar langsung dihapus..!!!
Emoticon