Membuat Tombol Horizontal Twitter, Facebook dan Google Plus di Blog

Sebelumnya saya telah memberikan tips dan trik bagaimana membuat tombol twitter pada blog anda. Nah kali ini kita akan membuat trik yang lebih menarik lagi yaitu membuat tombol twitter, facebook, dan google plus pada posting blog anda. Tombol social bookmarking ini berfungsi untuk mengijinkan pengunjung yang membaca posting anda untuk berbagi melalui situs twitter, facebook dan google plus ke teman-temannya. Hal ini tentunya akan meningkatkan trafik pada blog anda. Untuk memasangnya sangat mudah saja, caranya ikuti langkah berikut ini:

1. Log in ke blogger.
2. Klik Rancangan --> Edit Halaman
3. Centang expand template widget
4. Carilah kode seperti ini: <data:post.body/>
5. Paste kode dibawah ini dibawah kode <data:post.body/>

<!—Tombol Sosial horizontal oleh www.jurus2ngeblog.blogspot.com-->
<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;'/>
<!—Tombol Sosial horizontal oleh www.jurus2ngeblog.blogspot.com-->

Keterangan: Jika anda ingin tombol ini muncul diatas posting blog maka kode tersebut diletakan diatas kode <data:post.body/>

6. Simpan template anda lalu lihat hasilnya

Jika anda sudah memasangnya maka hasilnya akan terlihat seperti pada bagian bawah posting blog saya. Semoga artikel ini bermanfaat bagi anda. Selamat mencobanya!

Posted in: Tips dan Triks