Di postingan kali ini saya akan berbagi masih diseputar Tombol sosial share yang akan dipasang pada blogspot. Namun ini lebih di khususkan bagi sobat yang mempunyai Blog Onlineshop yaitu pemasangan tombol chat melalui SMS dan WhatsApp langsung ke no handphone admin blog onlineshop tersebut.
Cara ini menurut saya lebih efisien dan sangat memudahkan calon pelanggan untuk menghubungi admin tersebut tanpa harus lagi menginput no handphone, cukup tinggal klik saja tombol yang mau digunakan dan secara otomatis akan terhubung dengan no admin blog onlineshopnya. Tombol ini hanya akan berfungsi jika si calon pelanggan mengunjungi blog onlineshop tersebut melalui smartphone. Jika melalui PC biasanya akan diarahkan ke Aplikasi pendukung lainnya seperti Skype atau bagi pelanggan yang sudah menginstal WhatsApp di komputernya dapat langsung berinteraksi dengan mengirimkan pesan ke admin blog tersebut.
Bagi sobat yang kebetulan mempunyai Blog Onlineshop dan mau mencobanya mari ikuti langkah penerapannya berikut ini Cara Memasang Tombol Chat SMS Dan WhatsApp di Blog Onlineshop.
Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini lalu letakkan di atas kode </head>.
Langkah Ke Dua
Silahkan sobat salin kode HTML dibawah ini lalu letakkan di bawah postingan.
Jika sudah selesai dan sesuai dengan langkah penerapan diatas silahkan SAVE, dan selesai. Semoga bermanfaat.
<b:if cond='data:blog.pageType == "item"'>
<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>Langkah Ke Dua
Silahkan sobat salin kode HTML dibawah ini lalu letakkan di bawah postingan.
<b:if cond='data:blog.pageType == "item"'>
<div id='cara_belanja'>
<span id='carabelanja'/>
<h4>Cara Belanja Di ONLINESHOP 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='"https://api.whatsapp.com/send?phone=6281xxxxxxx&text=Saya%20pesan%20" + 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='"sms://+62813xxxxxxxx?body=Saya%20pesan%20" + 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>Jika sudah selesai dan sesuai dengan langkah penerapan diatas silahkan SAVE, dan selesai. Semoga bermanfaat.
EmoticonEmoticon