June 25, 2012

Cara Pasang Tombol Tweet, Google + dan Like Facebook



Cara Pasang Tombol Tweet, Google + dan Like Facebook

Sebelumnya ada teman yang menanyakan cara memasang tombol like di postingan, nah kali ini saya memiliki kesempatan untuk membuat tutorial cara membuat tombol Tweet, Google + dan tombol like Facebook tanpa menggunakan plugin pihak ketiga. Jadi disini kita tidak menggunakan plugin pihak ketiga agar loading blog tidak menjadi berat apabila di tambahkan tombol Tweet, Google + dan tombol Like.

Cara membuat tombol Tweet, Google + dan like tanpa plugin pihak ketiga:
1. Login ke Blogger > Template > Edit HTML
2. Sebelum mengubah kode HTML sebaiknya cadangkan dulu template anda untuk menghindari hal-hal yang tidak diinginkan.
3. Centang
4. Cari kode <data:post.body/> jika di Blog anda ada banyak kode seperti itu, pilih kode yang kedua.
5. Simpan kode berikut ini setelah kode <data:post.body/> atau jika anda ingin memasang tombol Tweet, Google + dan tombol like Facebook di atas postingan, simpan kodenya sebelum <data:post.body/>
<div style='float:left;width:80px'>
<a class='twitter-share-button' href='https://twitter.com/share'>Tweet</a>
<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>
</div>
<div style='float:left;padding-left:10px;width:60px'>
<g:plusone size='medium'/>
</div>
<div style='float:left;padding-left:10px;width:90px'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' height='20' scrolling='no' style='border:none;overflow:hidden; '/>
</div>
6.  Save template dan lihat hasilnya.

Note:
- Jika tombol Google + tidak muncul, copy kode <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> di atas kode </head>
- Jika tombol Tweet, Google + dan Like tidak ingin ditampilkan di halaman Home atau hanya ingin ditampilkan di halaman postingan saja, cukup tambahkan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> dan </b:if> diantara kode tombol tadi. menjadi seperti ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
< Kode tombol Tweet, Google + dan Like... >
</b:if>
Sekian, semoga bermanfaat..

0 comment:

Post a Comment

Related Posts Plugin for WordPress, Blogger...