Tutorial cara membuat tombol share whatsapp di blogspot

Xianjeng.net - Cara memasang tombol share whatsapp di blogspot ini sempat membuat admin pusing. Cari tutorial membuat tombol share ke whatsapp di Google.Com Ketemu sih, Cuma ada sedikit yang tidak benar di tutorial tersebut.

Seperti yang anda ketahui whatsapp bisa menjadi sumber trafik bagi para blogger di dunia saat ini karena pertumbuhan pengguna yang luar biasa untuk whatsapp.

Silakan akan ikuti langkah-langkah menambahkan tombol share ke whatsapp di Blogger.

Buka Blogger > Template > Edit HTML

Sekarang, temukan ]]> </ b: skin> menggunakan CLT + F untuk mencari di template Anda dan di atasnya, copy dan paste kode berikut di sana:

.whatsapp a:hover {
 background: linear-gradient(#01A507, #069A00);
}
.whatsapp i {
 color: #038F02;
 background: #FFF;
 text-shadow: none;
 font-weight: 900;
 border-radius: 2px;
 position: relative;
 left: -3px;
 margin-right: -4px;
 padding: 2px;
 -webkit-font-smoothing: antialiased;
}
.whatsapp a {
 font-family: sans-serif;
 font-weight: 700;
 text-decoration: none;
 font-size: 11px;
 color: #FFF;
 padding: 7px;
 background: linear-gradient(#009805, #058400);
 padding-top: 4px;
 border-radius: 2px;
 padding-bottom: 5px;
 text-shadow: 1px 1px 2px #797272;
}

 Sekarang, cari <data: post.body /> dan di bawahnya, sisipkan kode berikut ini:

<div class='whatsapp'>
<i class='fa fa-whatsapp'></i>
<whatsapp expr:text='data:post.title' expr:href="data:post.url"></whatsapp>
<a href="kipu" data-action="share/whatsapp/share">Share</a>
</div>
<style>
@media only screen and (max-width:780px) {
div.whatsapp {display:block!important;}
}
div.whatsapp {display:none}
</style>

Anda dapat mengubah teks tebal untuk mengubah teks yang akan muncul pada tombol.

Sekarang, cari </ body> dan copy-paste script berikut diatasnya:

<script>
//<![CDATA[
    var x = document.getElementsByTagName("whatsapp")[0].getAttribute("href");
    var y = document.getElementsByTagName("whatsapp")[0].getAttribute("text");
    var z = "whatsapp://send?text=" + y + ' ' + x;
document.body.innerHTML = document.body.innerHTML.replace('kipu', z);
//]]>
</script>

Lalu Simpan Template Anda

Catatan: - Jika setelah menempatkan kode tombol WhatsApp, jika tombolnya tidak muncul, cukup cari tag <data: post.body /> yang lain dan coba taruh setelah itu. Anda mungkin akan menemukan dua <data: post.body /> , jadi cobalah dengan masing-masing. 

Thats semua guys !! 

Jika Anda menemukan kesalahan saat menggunakan tutorial ini, silakan gunakan kotak komentar di bawah ini. INGAT: Selalu berkunjung untuk topik yang lebih menarik.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: