Cara Membuat Tombol Live Chat via Whatsapp Melayang di Blog

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan informasi mengenai Cara Membuat Tombol Live Chat via Whatsapp Melayang di Blog. Hasil jadi dari tutorial ini bisa dilihat langsung pada halaman ini yang telah menampilkan tombol Live Chat WA melayang dibagian pojok kanan bawah.

Berikut adalah Cara Membuat Tombol Live Chat via Whatsapp Melayang di Blog
1. Buka akun Blogger >> Pilih Tema >> Edit HTML
2. Copy Kode CSS dibawah ini, lalu letakkan (paste) diatas kode ]]></b:skin>

.buttonkurawa {
text-decoration: none;
position:fixed;
z-index:100;
bottom:20px;
right:20px;
color: #fff;
background-color: #26a69a;
text-align: center;
letter-spacing: .5px;
transition: .2s ease-out;
cursor: pointer;width:250px;padding:5px 3px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 
rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.buttonkurawa a{
color: #fff;
}

3. Copy kode HTML dibawah ini, lalu letakkan (paste) diatas kode </body>

<div class="buttonkurawa">
<a target="_blank" href="https://wa.me/6285655656604?text=Hello%20Kurazone"> Live Chat via Whatsapp <i class="fa fa-whatsapp"></i></a>
</div>

4. Simpan Template
5. Selesai dan liat hasilnya

Note :

1. Jangan lupa untuk mengganti nomor telpon dan kata kata yang ingin digunakan
2. kode %20 menandakan spasi. Contoh : Hello%20Kurazone = akan menjadi Hello Kurazone saat tampil di WA.
3. Edit kode background-color: #26a69a; apabila kalian ingin merubah warna backround tombolnya. Misal background-color: red;
4. Pastikan bahwa template kalian juga sudah mendukung Fontawesome supaya ikon WA nya dapat tampil di blog.

Itulah informasi mengenai "Cara Membuat Tombol Live Chat via Whatsapp Melayang di Blog", selamat mencoba dan semoga bermanfaat. Goodluck!

Baca juga tutorial menarik lainnya :

1. Cara Membuat Tombol Contact WhatsApp Melayang di Blog
2. Cara Membuat Tombol Contact WhatsApp (WA) Special untuk Blog Penjualan / Toko Online

Live Chat via Whatsapp