Cara Membuat Tombol Share di Setiap Postingan

kevinservis TIPS BLOG 26 Mar 2013

Cara Membuat Tombol Share di Setiap Postingan

Cara Membuat Tombol Share di Setiap Postingan - Perlu anda ketahui, membuat tombol share dalam blog itu memang sangat diperlukan. Selain untuk memudahkan pengunjung blog untuk membagi artikel anda, dengan adanya tombol share ini juga dapat berpengaruh baik terhadap SEO blog anda. Apalagi tombol share google plus, saya rasa ini yang paling bermanfaat.

Untuk itu, kali ini saya akan membagikan tips untuk memasang tombol share di setiap postingan pada blog anda. Layout dari tombol share itu sendiri berbentuk horizontal dengan tombol share facebook, twitter, dan google plus. Kenapa hanya 3 social media, karena memang 3 social media inilah yang sedang populer saat ini.

Untuk lebih jelasnya, saya akan berikan screenshotnya. Perhatikan gambar dibawah ini !

Lalu bagaimana cara membuatnya, caranya sangat mudah. Seperti biasa, yang perlu anda lakukan adalah mengcopy beberapa script dan meletakannya di blog anda. Baiklah mari kita perhatikan langkah berikut !

1. Ketikan www.blogger.com di browser anda, setelah itu login dengan akun anda.

2. Sampai pada dashboard blogger, pilih menu TEMPLATE lalu pilih EDIT HTML.

3. Centang kotak yang bertuliskan EXPAND TEMPLATE WIDGET.

4. Bila sudah, cari kode  <data:post.body/> (Untuk memudahkan pencarian, gunakan CTRL + F)

5. Disini terdapat dua pilihan, bila anda ingin meletakan tombol share di bawah postingan maka copy paste script dibawah ini tepat 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;'/>

6. Bila anda ingin meletakan tombol share ini di atas postingan anda, letakan script di atas tepat di atas kode <data:post.body/>
7. Kemudian SIMPAN template anda.

Bagaimana, mudahkan cara memasangnya ? sekarang anda sudah berhasil memasang tombol share di blog anda. Buatlah artikel yang menarik sehingga pengunjung blog anda tidak segan-segan untuk membagikan artikel tersebut kepada temannya.

Baiklah, saya rasa cukup pembahasan saya kali ini mengenai Cara Membuat Tombol Share di Setiap Postingan.  Semoga bermanfaat dan jangan lupa nantikan update saya berikutnya .