Membuat Toggle Customer

Membuat Toggle Customer
Di Posting Oleh : NAMA BLOG ANDA (NAMA ANDA)
Kategori : Artikel blogger

Membuat Toggle Customer dapat mempermudah pengunjung untuk berinteraksi dengan administrator. Biasanya Customer Service memberikan nomor Whatsapp, Pin BBM, Line, dll. Selain itu dapat membuat tampilan blog anda menjadi lebih menarik. Langsung saja mari kita lakukan.

1. Masuk ke dashbor blogger anda
2. Pilih menu Tata Letak
3. Tambahkan Widget
4. Pilih HTML/Javascript
5. Copy Paste Code Di bawah ini

<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/AVvXsEgvqRDX_3EAt6uV5hVvhTxyAsuZcKwHXRDiaKsb2eiLixAusoOroiDIXpz8MyvDnYoEmNivauPuzFdPdQZ3Rgy8_5XOAxejzI1jonlMs5RLeXQDl3eibUNO_M9msZvJ4r7rs9etd4EMV3kb/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 : Silahkan anda ganti teks yang berwarna merah dengan kontak anda sendiri.

6. Save

Anda bisa melihat Live Demo di blog ini. Sekian terima kasih. Wassalamualaikum