Membuat Tombol Chat WA & SMS Langsung Ke Admin Blog

Cara Membuat Tombol / Button Chat WA & SMS Langsung Ke Admin Blog / Ke Hp (ponsel). Hallo sobat blogger, kali ini saya akan membuat tutorial bagaimana cara membuat tombol / button Chat WA (Whatsapp) dan SMS di blog yang bisa langsung ke kirim ke admin blog atau bisa langsung terkirim ke ponsel anda, sangat praktis dan mudah.

Lihat DEMO

Sebelumnya terimakasih untuk Mas Adhy, karena saya ambil tutorial cara membuat tombol chat WA dan SMS ini dari blognya mas adhy, kembali ke topik, widget button atau tombol chat wa dan sms ini saya rasa sangat di perlukan sekali bagi anda yang mempunyai blog atau situs toko onlin ( Online store ) untuk mempermudah pembeli mengontak anda.

Baca : Cara Memasang Iklan Adsense di Tengah Posting / Dimana Saja

Hal ini sangat di perlukan untuk kelancaran bisnis anda dan kenyamanan pelanggan blog anda, karena tak dipungkiri, di jaman yang sudah moderen seperti ini, orang-orang banyak menggunakan media internet untuk bebelanja online dan menggunakan wa atau whatsapp ataupun sms agar lebih praktis dalam pemesanan.

Baca : Cara Agar Artikel Cepat Terindex Google Dalam 1 Detik

Untuk tutorial cara membuat tombol atau button chat WA (Whatsapp) dan sms yang bisa langsung di kirim ke ponsel atau bisa langsung ke admin blog ini juga sangat mudah sekali.

Silahkan simak baik-baik.

Cara Membuat Tombol Chat WA & SMS Langsung Ke Admin Blog.

1. Buka akun blogger anda.
2. Pilih menu template dan klik EDIT HTML
3. Selanjutnya letakan kode dibawah ini tepat diatas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*<![CDATA[*/
.btn{padding:10px 16px;margin:0;font-size:16px;line-height:1.3333333;border-radius:6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;font-weight:500;text-decoration:none;display:inline-block}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}
.btn-purple{background-color:#8E24AA;border-bottom:2px solid #6A1B9A;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;color:#fff;}
.btn-purple:active,.btn-purple:focus,.btn-purple:hover{background-color:#6A1B9A;color:#fff}
#cara_belanja{margin-top:30px;background:#F3E5F5;padding:15px 15px 5px;border-radius:3px!important;}
#carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden}
#cara_belanja h4{font-size:16px;font-weight:600;color:#8E24AA;margin:0;line-height:1}
#cara_belanja p{font-size:14px;font-weight:400;display:block;margin:10px 0;line-height:1.2}
#cara_belanja a{margin-bottom:10px;margin-right:10px}
#cara_belanja svg{width:24px;height:24px;vertical-align:-15%;}
/*]]>*/
</style>
</b:if>

4. Selanjutnya letakan kode dibawah ini tepat di bawah kode articel atau posting blog anda, agar penempatan lebih relativ atau bisa ditempatkan di atas artikel terkait blog anda.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='cara_belanja'>
<span id='carabelanja'/>
  <h4>Cara Belanja Di Madamvia.web.id</h4>
  <p>Silahkan pesan item ini dengan menghubungi Contact Toko yang tertera di sidebar kanan (untuk device mobile ada di bagian bawah), harap disertakan Kode Item atau Nama Item ketika order barang. Barang dikirimkan sehari setelah transaksi selesai. Atau silahkan pesan langsung via tombol Whatapps dan SMS di bawah ini. Admin toko akan langsung merespond pesanan Anda.</p>
<a class='btn btn-purple btn-lg' expr:href='&quot;https://api.whatsapp.com/send?phone=62877721xxx&amp;text=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
    <path d='M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='#fff'/>
</svg> Pesan Sekarang</a>
<a class='btn btn-purple btn-lg' expr:href='&quot;sms://+6281312815xxx?body=Saya%20pesan%20&quot; + data:post.title'><svg viewBox='0 0 24 24'>
    <path d='M17.25,18H6.75V4H17.25M14,21H10V20H14M16,1H8A3,3 0 0,0 5,4V20A3,3 0 0,0 8,23H16A3,3 0 0,0 19,20V4A3,3 0 0,0 16,1Z' fill='#fff'/>
</svg> SMS Sekarang</a>
  </div>
</b:if>

Keterangan : Ganti kode nomer yang saya tandai warna MERAH dengan no handphone anda dan no WA (Whatsapp) anda. 

Kode yang kedua bisa anda tempatkan dimana saja sesuai dengan tempat yang anda inginkan.

Sekian untuk tutorial "Membuat Tombol Chat WA & SMS Langsung Ke Admin Blog"

Share to:

Google+ Facebook Twitter