Cara Membuat Tombol Chat WA & Pesan SMS Ke Admin di Blogspot

Mediababe.net Cara membuat dan memasang tombol chat whatsapp dan sms ke admin langsung terkirim ke admin di blog atau blogspot. Tombol ini memang tidak terlalu penting untuk blog pribadi namun tombol ini sangat berfungsi bagi kalian yang memiliki blog untuk berbisnis online seperti jualan online atau online shop yang menggunakan website dengan platform blogspot. Tentunya dengan menggunakan tombol ini akan memudahkan pengunjung untuk memesan barang yang anda tawarkan pada website.

membuat tombol wa dan sms di blog
source gambar: madamvia.web.id

Tutorial ini sebenarnya saya dapatkan dari mas adhy dari blog kompiajaib kalian bisa cari di kotak pencarian google blog tersebut. Kembali lagi ke topik utama kita tombol chat wa dan sms di blog ini sangat diperlukan untuk kelancaran bisnis anda dan kenyamanan pelanggan blog anda, karena tak bisa dipungkiri, pada jaman yang sudah modern seperti ini, semua orang banyak menggunakan media internet untuk berbelanja online dan menggunakan wa atau whatsapp ataupun sms agar lebih praktis dalam pemesanan.

Lantas bagaimana 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 anda simak tutorialnya pada berikut ini.

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

1. Langkah pertama silahkan anda buka akun blogger anda.
2. Kemudian Pilih menu template dan klik EDIT HTML
3. Selanjutnya anda letakan kode berikut 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. Setelah melakukan langkah diatas, masih pada kode lalu letakan kode dibawah ini tepat di bawah kode article 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=6281236459xxx&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://+6281236459xxx?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>

Ket.

Silahkan anda ubah nomor yang sudah saya tandai dengan warna merah menggunakan nomor handphone kontak yang akan menjadi nomor kontak yang akan dihubungi oleh calon pembeli online shop anda.

Demikianlah bagaimana cara Membuat Tombol Chat WA & Pesan SMS Ke Admin di Blogspot dengan mudah agar pengunjung blog anda lebih praktis menghubungi anda. Semoga bermanfaat.


Gambar Gravatar
Seseorang yang malas, suka tidur molor pengen sukes

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *