Cara Membuat Tombol SMS dan Chat Whatsapp di Blog

Membuat fungsi chat dan sms di artikel pada blog cara ini sangat cocok untuk anda yang sedang design template olshop khususnya diblogger, jika menggunakan plugin lagi dari web-web yang menyediakan fungsi tersebut tapi biasanya hal itu memperlambat kinerja blog.

Tombol chat whatsapp dan messaging ini ketika di klik maka akan langsung membuka aplikasi whatsapp jika yang diklik whatsapp atau pesan maka yang terbuka pesan. dan tentu saja langsung terdapat isi pesan yang langsung bisa dikirim ke yang punya olshop atau blog tersebut. untuk itu kamu bisa merubah terlebih dahulu Nomor Telepon dengan punya anda jangan lupa lagi untuk whatsapp silahkan pasang yang sudah terdaftar

Berikut ini cara pemasangannya di template anda(Blogger - Template - Edit HTML) agar Icon disamping teks muncul ditemplate anda harus ada font-awesome.css, jika belum ada silahkan salin dibawah </head>

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

Tahap Pertama

silahkan salin css dibawah ini dan letakkan diatas </head>

<style type="text/css">
/*<![CDATA[*/
.tantan{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;}.tantan:active:focus,.tantan:focus{outline:0;}.tantan:focus,.tantan:hover{color:#333;text-decoration:none;outline:0;}.tantan: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);}.tantan-sayang{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px;}#bajumantan{margin-top:30px;background:#e2e2e2;padding:15px 15px 5px;border-radius:3px!important;text-align:center;}#carabelanja:target{display:block;margin-top:-80px;height:80px;visibility:hidden;}#bajumantan h4{font-size:16px;font-weight:600;text-transform:uppercase;color:#f36f36;margin:0;line-height:1;}#bajumantan p{font-size:14px;font-weight:400;color:#444;display:block;margin:10px 0;line-height:2.2;}#bajumantan a{margin-bottom:10px;margin-right:10px;}.kasih{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:'Open Sans',sans-serif;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;transition:all 0.3s ease-out;}.kasih{background-color:#4b4d4f;}.kasih:hover{background-color:#909aa5;color:#fff;}
/*]]>*/
</style>

Tahap Kedua

kode html dibawah ini bisa anda letakkan sesuai keinginan anda letaknya, jika ingin dibawah artikel bisa diletakkan dibawah atau diatas kode <data:post.body/> ,biasanya ada 3 silahkan pilih salah satu.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="bajumantan"><a class="tantan kasih tantan-sayang" href="https://api.whatsapp.com/send?phone=6285822266832&amp;text=Saya Mau donasi ke blog MantanKode"><i class='fa fa-whatsapp'></i> WhatsApp</a><a class="tantan kasih tantan-sayang" href="sms://+6285822266832?body=Saya Mau donasi ke blog MantanKode"><i class='fa fa-phone'></i> Message</a></div>
</b:if>

Yang Perlu diubah:

tanda merah

6285822266832

Tahap Ketiga / Terakhir

simpan template dan lihat disalah satu artikel anda, jika ada error silahkan komentar dibawah.

Terima Kasih semoga bermanfaat jangan lupa dishare atau bookmark :D