Cara Membuat Tombol Share Whatsapp di Blogger

Hey temen-temen, jaman sekarang pengguna Smartphone udah sangat meningkat… Dan itu seharusnya menjadi kesempatan para pemilik blog untuk bisa meningkatkan traffic blognya dengan plugin share atau tombol berbagi. Salah satunya adalah tombol share ke whatsapp.

Kali ini saya akan coba share tombol berbagi yang bisa membuat pembaca mudah untuk membagikan artikel Anda ke Sosial Media Whatsapp dan perlu Anda ketahui, saya hampir semalaman cari cara buat bikin tombol ini, udah mampir ke blog sana-sini belum work juga, dan akhirnya ketemu juga caranya hehe,..

Tutorial di bawah ini bisa digunakan untuk blogger dan format HTML. Langsung saja ke tutorialnya.

1. Buka blogger, edit template dan klik HTML

2. Cari kode </head> dan tempatkan kode di bawah ini tepat di atas kode </head> tersebut.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
// Whatsapp share button
$(document).ready(function() {
$(document).on("click", '.tist', function() {
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
var text = $(this).attr("data-text");
var url = $(this).attr("data-href");
var message = encodeURIComponent(text) + " - " + encodeURIComponent(url);
var whatsapp_url = "whatsapp://send?text=" + message;
window.location.href = whatsapp_url;} 
else {alert("This function works on Mobile Device only");}});
});
</script>

3. Cari kode ]]></b:skin> dan tempatkan kode di bawah ini tepat di atas kode ]]><b:skin> tersebut.

/* Whatsapp css setting */
.tist{background:#35BA47; color:#fff; padding:2px 6px; border-radius:3px;}
a.tist:hover{color:#fff !important;}

4. Tempatkan kode di bawah ini dimanapun Anda ingin menempatkan tombol berbagi/ plugin Whatsapp ini.

<a class='tist' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#'>Share on whatsapp</a>

5. Selesai 🙂 Jangan lupa share temen-temen…