Membuat Tombol Share Horizontal di Setiap Post

Salam blogger, pada posting yang terdahulu saya pernah membahas artikel yang sama seperti ini, namun di artikel yang dulu tombol share berada pada posisi vertikal ke atas, nah kali ini saya akan membahas bagaimana caranya membuat Tombol Horizontal dari Social Networking. Tombol social networking ini berfungsikan membuat trik yang lebih menarik lagi yaitu membuat tombol twitter, facebook, dan google+ pada posting untuk mengijinkan para pengunjung membagikan artikel tersebut.

Inilah gambaran share button yang akan kita buat

Jika sobat tertarik untuk membuatnya, ikuti tutorial dibawah ini:

1. Log in ke account blogger sobat

2. klik menu Template

3. kemudian pilih Edit Html

4. pilih lanjutkan untuk masuk ke Setup Html

5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 

    bertuliskan "expand template widget"

6. lalu sobat cari kode <data:post.body/>, agar pencarian lebih mudah sobat 

    tekan tombol ctrl+f pada keyboard komputer sobat

7. Copy kode di bawah ini lalu letakan dibawah kode <data:post.body/>

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


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='horizontal-social-buttons' style='padding:5px 0 5px;'>
<!-- 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>
</div>
</b:if>


<div style='clear: both;'/>

Catatan: Jika sobat ingin tombol ini muncul diatas posting blog, maka kode 
             tersebut diletakan diatas kode <data:post.body/>
6. Simpan Template


Selamat mencoba dan semoga bermanfaat