Cara Memasang Tombol Like Facebook, Twitter dan Google Plus


Selamat berjumpa kembali dengan maswardi dalam dalam rangka tutorial membuat blog. Pada kesempatan kali ini, saya akan menulis bagaimana mempercantik blog dengan cara memasang tombol Tweet, Like Facebook dan Google Plus di bawah postingan. Tulisan tentang tutorial cara membuat tombol Tweet, Google + dan tombol like Facebook ini saya kutip dari mainbom.com.

Tutorial cara membuat tombol Tweet, Google + dan Like Facebook:

1. Login ke Blogger > Template > Edit HTML
2. Sebagai backup sebaiknya download dulu template Anda.
3. Centang Expand Template Widget 
4. Cari kode <data:post.body/> jika di Blog Anda ada beberapa kode tersebut, 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.

Catatan:
- 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. Dan hasilnya menjadi seperti ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
< Kode tombol Tweet, Google + dan Like Facebook >
</b:if>

Semoga Bermanfaat

14 komentar:

  1. mengunjungi blog yang bagus dan penuh dengan informasi yang menarik tentang cara memasang tombol like facebook adalah merupakan kebahagiaan tersendiri.... teruslah berbagi informasi

    BalasHapus
  2. cara membuat kolom pada widget tsb gmna gan ?

    BalasHapus
  3. cara memboat tombol google plus yg menarik... sangat mudah di mengerti.... thanks yaaa...

    BalasHapus
  4. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  5. busuk bro. gak muncul pun. uda Q coba gak berhasil bro.

    BalasHapus
  6. terima kasih .. atas.. berbaginya..
    langsung ok.. tipsnya..
    semoga sukses selalu
    salam ayo bangkit indonesia

    BalasHapus
  7. terima kasih untuk ilmunya, sudah saya coba diblog saya http://nikiblogsae.blogspot.com/ dan berhasil . semoga sukses slalu , tq

    BalasHapus
  8. makasih
    berkunjung juga ke ashare-xp.blogspot.com

    BalasHapus
  9. wow, bikin blog tambah bagus ini
    makasih ya tutor nya

    BalasHapus