Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Baca Juga

Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Tombol berbagi sosial (Social Share Button) bawaan Blogger (default social share button) sangatlah sederhana, terlalu simple --jika tidak mau dikatakan jelek. Lihat saja:

Nah, kita ganti dengan yang lebih bagus, keren, lebih menarik (eye catching), seperti ini:

Yuk, kita ganti!

Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

1. Tema > Edit HTML
2. Cari kode berikut ini:

              <b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + &quot;&amp;target=email&quot;' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + &quot;&amp;target=blog&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=270,width=475\&quot;); return false;&quot;' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showPinterestButton'><a class='goog-inline-block share-button sb-pinterest' expr:href='data:post.sharePostUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:top.shareToPinterestMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToPinterestMsg/></span></a></b:if><b:if cond='data:top.showPlusOne'><div class='goog-inline-block google-plus-share-container'><data:post.googlePlusShareTag/></div></b:if>
</b:includable>

Bagi yang kesulitan mencari kode di atas, lihat gambar ini:

3. Setelah ketemu, HAPUS kode tersebut lalu GANTI dengan dengan kode berikut ini:

              <b:includable id='shareButtons' var='post'>
<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_facebook_share" fb:share:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
</b:includable>

4. SIMPAN kode berikut ini di atas kode </body>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5156a09e76c1568f"></script>
<script type='text/javascript'>
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>

Catatan:
Perhatikan kode warna merah. Itu bisa Anda ubah atau biarkan. Kalau mau diubah dengan kode milik Anda sendiri, silakan buka AddThis dan dapatkan kode tersebut.

5. Save! Simpan template.

6. Lakukan setting di widget Blog Post seperti gambar ini:

Centang "Show Share Buttons". Lainnya samakan dengan gambar di atas, kecuali mau munculkan ikon edit cepat dan munculkan profil G+ Anda.

Itu dia Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger. Bukan hanya bisa share ke Facebook, Twitter, dan Google Plus, tapi juga ke Linkedin, Pinterest, WhatsApp (WA), dan banyak lagi. Cobain aja!  Wasalam.*