Cara Mengganti Tombol Menyebarkan (Social Share Button) Bawaan Blogger

Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

Tombol mengembangkan 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), ibarat ini:

Yuk, kita ganti!

Cara Mengganti Tombol Berbagi (Social Share Button) Bawaan Blogger

1. Tema > Edit HTML
2. Cari arahan 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 arahan di atas, lihat gambar ini:

3. Setelah ketemu, HAPUS arahan tersebut kemudian GANTI dengan dengan arahan 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 arahan berikut ini di atas arahan </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 arahan warna merah. Itu sanggup Anda ubah atau biarkan. Kalau mau diubah dengan arahan milik Anda sendiri, silakan buka AddThis dan dapatkan arahan tersebut.

5. Save! Simpan template.

6. Lakukan setting di widget Blog Post ibarat 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 sanggup share ke Facebook, Twitter, dan Google Plus, tapi juga ke Linkedin, Pinterest, WhatsApp (WA), dan banyak lagi. Cobain aja!  Wasalam.*