Minggu, 24 November 2013

Cara Paling Mudah Memasang Widget Share Button Pada Blogger



Menurut ane, share button ini penting banget fungsinya. Dengan adanya share button, pembaca bisa langsung membagikan artikel ke berbagai media sosial. Nah, untuk share button yang ane bagikan kali ini terdapat beberapa tombol yaitu Tweet button (untuk men-tweet artikel), Google +1 button, dan terakhir Facebook Like dan send button.


Yang ane tulis disini adalah cara memasang widget share button di bawah postingan / artikel. Sebenarnya ini bisa diletakkan di atas postingan, tapi ane nggak menyarankan itu gan. Kalau widget ini diletakkan di atas postingan, pembaca belum tahu tentang isi artikel tersebut (sama dengan istilah membeli kucing dalam karung gan). Dan setelah selesai membaca, pembaca bakal lupa kalau ada widget ini. Makanya sanagat disarankan untuk meletakkan widget ini di bawah postingan.

Satu Lagi gan, cara ini adalah yang paling simpel gan!

Penjelasanya cukup gan. Time to try it!

  • Seperti biasa, Log in akun Blogger agan dulu
  • Klik Template > Edit HTML
  • Jangan Lupa Backup Template dulu buat jaga-jaga
  • Cari kode <data:post.body/> (biar gampang nyarinya tekan Ctrl+F)
  • Kalo udah ketemu, Copy kode di bawah ini tepat di bawah <data:post.body/>
<!-- Social Scripts 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>
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->

<div class='clear'/>
  • Klik Save Template
  • Selesai gan, Gampang banget kan?

SALAM!



Tidak ada komentar:

Posting Komentar