Cara Mudah Membuat Tombol Live Chat via Whatsapp Melayang di Blog

Daftar Isi [Tampilkan]

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/6285655xxxxxx?text=Hello%20Admin"> 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%20Admin = akan menjadi Hello Admin 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...

Bagikan Artikel ini