Cara Membuat Tombol Live Chat via Whatsapp Melayang di Blog

Pilihan Editor :

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

BACA JUGA ARTIKEL MENARIK LAINNYA:

Tidak ada komentar :

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.