Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML #1

THEME SHOP - Tukang Toko Online
Jasa Review

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.


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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbkElhAs2q1vlh_DygnWMgK4E_jY58rde0PEbF4uHlMob5S63kiprD1LDHcyFb3tY3NNSUyG5NPixVYsPYSURW_p9ZLt4yk4ZWAj911WE2elRPgwTOETiRtxUy2dhEFo9NtDr7_lSAegOC/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,

9 komentar untuk "Membuat Toggle Customer Service Munculan dari Samping"

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

    BalasHapus
  2. gan kalau di sebelah kiri giman gan,please

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

    BalasHapus
  4. gan klo di simpan di samping kiri gmn y? tengkiw

    BalasHapus
  5. kl untuk social network apa yg hrus ditambhkan gan ?

    BalasHapus
  6. ok ternyata saya dapatnya disini apa yang saya butuhkan..
    bagus banget gan..ijin pake gan :-bd

    BalasHapus