Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Follow @romel_tea
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:

Social Share Button

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

Social Share Button

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:

Tombol Berbagi (Social Share Button) Bawaan Blogger


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:

Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

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.*

Thanks for reading Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger | Tags:

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

No Spam, Please!