Cara Memasang Tombol Share Whatsapp di Blogger - Deny Listianto

August 21, 2019

Cara Memasang Tombol Share Whatsapp di Blogger

Berikut adalah cara memasang tombol share Whatsapp dan cara mengatasi jika tombol share Whatsapp tidak berfungsi di blogger. Salah satu cara memudahkan pengunjung membagikan artikel di blog adalah dengan cara memasang tombol share.

Cara Memasang Tombol Share Whatsapp di Blogger

Dari beberapa tombol share mungkin tombol share Whatsapp yang cukup efektif untuk meningkatkan jumlah pengunjung blog, Karena dengan adanya pintasan ini, seorang pengunjung akan lebih mudah membagikan apa yang mereka baca ke teman chat ataupun group.

Dengan jumlah pengguna yang demikian besar, maka Whatsapp merupakan salah satu media sosial yang bisa dimanfaatkan untuk kita para blogger agar konten yang kita buat lebih mudah menyebar atau populer di media sosial.

Cara Memasang Tombol Share Whatsapp di Blogger


Berikut ada dua cara memasang tombol share whatsapp di blogger, ikuti langkah-langkah dibawah ini.

1. Cara Pertama, menggunakan javascript

Buka Blogger, lalu buka menu TEMA > Edit HTML. Setelah itu cari kode <data:post.body/> dan letakkan kode berikut ini di bawah kode tersebut.

<!-- Whatsapp Share Buttons Start -->
 
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;//yourjavascript.com/09010225501/whatsappblogger.js&quot;;h.appendChild(s);}</script>

<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>

<!-- Whatsapp Share Buttons End -->

Jika sudah, klik Simpan Tema dan lihat hasilanya.

2. Cara Kedua, tidak menggunakan javascript

Buka Blogger, lalu buka menu TEMA > Edit HTML. Setelah itu cari kode <data:post.body/> dan letakkan kode berikut ini di bawah kode tersebut, atau juga bisa gabungkan dengan kode tombol share lainya.

<li class='wa-btn'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> Share</a></li>

Jika sobat ingin tampilan nya lebih keren bisa tambahkan kode CSS berikut ini diatas kode
</style>

.wa-btn{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-btn a{color:#fff;margin:0 auto;padding:10px 8px;background:#2baf2b;border-radius:3px;}
.wa-btn i{font-weight:300;margin:0 5px 0 0}

Setelah itu, klik Simpan Tema dan lihat hasilanya.

Cara Mengatasi Jika Tombol Share Whatsapp Tidak Berfungsi


Tombol share whatsapp seringkali tidak berfungsi, maka berikut ini adalah cara mengatasinya :

Buka Blogger, lalu buka menu TEMA > Edit HTML, setelah itu cari kode seperti di bawah ini.

<li class='wa-btn'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> Share</a></li>

Ganti kode yang saya tandai dengan kode berikut ini.

expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot;%20&quot; + data:post.url'

Sehingga hasilnya seperti berikut ini.

<li class='wa-btn'><a data-action='share/whatsapp/share' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot;%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> Share</a></li>

Dan jika sudah, klik Simpan Tema dan lihat hasilanya.

Demikian tutorial kali ini. Semoga bermanfaat dan terimakasih telah berkunjung.
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Notifications

Disqus Logo