Membuat Toggle Customer Service Munculan dari Samping - Hallo sahabat TIPS BELAJAR BISNIS ONLINE DAN INTERNET MARKETING, Pada Artikel yang anda baca kali ini dengan judul Membuat Toggle Customer Service Munculan dari Samping, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger Widget, Artikel tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Toggle Customer Service Munculan dari Samping
link : Membuat Toggle Customer Service Munculan dari Samping

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/AVvXsEhOkgvRIuTCifyMMUv7MwHBnt1qFqou-V-R0ssFYyELpe5Pp7YOzkIqpZqFXy4gEC7XrBdDwIVEXwJMILtb-Q0KcjpJmOHcnjTocnt6_2mZDNewffsgMDCyxoAk37XwIpK_eSFsHhHQ0b4u/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,

Demikianlah Artikel Membuat Toggle Customer Service Munculan dari Samping

Sekianlah artikel Membuat Toggle Customer Service Munculan dari Samping kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Toggle Customer Service Munculan dari Samping dengan alamat link https://tipstopmarketing.blogspot.com/2014/09/membuat-toggle-customer-service.html

Tweet