Membuat Tombol Pesan Melalui WA dan SMS

Dengan tombol ini konsumen tidak perlu input nomor kontak admin untuk memesan barang baik dengan WA atau SMS. Chat WA atau SMS konsumen akan langsung masuk ke nomor admin yang telah ditentukan, sehingga lebih memudahkan konsumen dalam memesan barang.

Silahkan copy kode di bawah ini dan simpan di atas </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>



dan Kemudian simpan kode HTML ini di edit HTML di bawah postingan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='cara_belanja'>
<span id='carabelanja'/>
  <h4>Cara Belanja Di Toko Kami</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=62GATNTIDGNMOMOR-WA&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://+62GANTIDGNNOMORHP?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>