Cara Mengganti Share Blogger Default

Bangiz - Jika Anda memiliki banyak teman di sosial media, baik itu Facebook, Twitter, Google+ atau yang lainnya pastinya akan sangat beruntung sekali. Karena dengan begitu Anda bisa membagikan artikel yang Anda posting kepada mereka dan dampaknya akan menambah trafik untuk blog Anda.

Oleh sebab itu tidak ada salahnya untuk memperbanyak teman melalui sosial media.

Share Blogger

Berbicara tentang sosial media berikut ini Bangiz mau berbagi tutorial tentang cara mengganti share Blogger default. Secara default, tombol share berada di bawah postingan yang tampilannya seperti berikut ini:

Default share

Jika Anda kurang suka tampilan tombol share bawaan Blogger, tidak ada salahnya mengganti dengan tampilan yang Anda inginkan. Untuk menggantinya ikuti saja caranya berikut ini;

1. Masuk Dasbor Blogger > Template > Edit HTML.
2. Cari kode berikut (gunakan Ctrl+F untuk memudahkan):

<b:includable id='shareButtons' var='post'>

3. Silahkan blok atau delete, kode lengkapnya seperti 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 + "&target=email"' 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 + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' 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 + "&target=twitter"' 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 + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' 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.showOrkutButton'>
      <a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'>
        <span class='share-button-link-text'>
          <data:top.shareToOrkutMsg/>
        </span>
      </a>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
  </b:includable>

4. Copy-Paste kode berikut pada kode yang di blok atau delete tadi.

<!-- Scripts by bangiz.blogspot.com Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<style type='text/css'>
#pin-wrapper &gt; a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Script by bangiz.blogspot.com End -->

5. Simpan template dan lihat hasilnya.

Adapun kode tersebut hasilnya akan seperti ini:

Blogger share

Jika Anda kurang suka silahkan ganti dengan kode lainnya yang Anda miliki. Jika kurang mengerti silahkan tinggalkan komentar dan jangan lupa bagikan ke teman Anda siapa tahu membutuhkan.