toturial pasang butang live chat whatsapp di blog

Hai guys, pada kali ini admin akan kongsikan bagaimana hendak pasang butang contact whatsapp.Ia berfungsi untuk orang yang melawat blog anda boleh menghubungi anda melalu whatsapp dengan hanya klik butang tersebut.

Cara Pasang Butang Live Chat via Whatsapp

  1. Pergi ke menu “Theme” > Pilih “Edit HTML“.

2. Klik pada keyboard “CTRL+F” > cari code ]]></b:skin> > Copy CSS dibawah ini > Masukkan code tersebut sebelum / atas ]]></b:skin>

/*Button WS - naktolong.com*/
.buttonws {
text-decoration: none;
position:fixed;
z-index:100;
border-radius:20px;
bottom:20px;
right:20px;
color: #fff;
background-color: #25D366;
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);
}
.buttonws a{
text-decoration: none;
color: #fff;
}
/*End Button ws*/

3. Cari code </body> > Copy code dibawah > Masukkan code tersebut sebelum / atas </body>

/*Button WS - naktolong.com*/
<div class='buttonws'>
<a href='https://wa.me/60123456789?text=Saya%20mahu..' target='_blank'> Hubungi Ws Kami <i class='fa fa-whatsapp'/></a>
</div>
/*End Button ws*/

4. Save theme

Note :

  • Sila tukar nombor 60123456789 kepada nombor ws anda, pastikan mula dari nombor 6.
  • Masukkan ayat masej anda selepas text= , contoh : text=Saya%20mahu.. jadi ia akan menjadi saya mahu. Code %20 mewakili space atau selang.
  • Jika ikon atau logo whatsapp tidak keluar. Sila masukkan code dibawah ini > dan masukkan selepas atau bawah <head>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Terima Kasih

LEAVE A REPLY

Please enter your comment!
Please enter your name here