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..

61 Responses to "Cara Pasang Tombol Tweet, Google + dan Like Facebook"

  1. maaf koment aku banyak...soalnya aq lagi kerjain sambil tenya ini.
    bagaimana bila tombol twitter nya di ubah menjadi tombol follow untuk twitter aq

    BalasHapus
  2. mkasih gan...
    it's work.

    BalasHapus
  3. aq ada pertanyaan banyak nih gan, kalo bisa tolong di jawab?
    1> pernah liat di blog arang mouse nya berbentuk segitiga berwarna merah, namun saat menyorot link berganti warna biru. nah bagaimna cara membuat nya?
    2> gimana ganti logo blog biar bisa bergerak, ya kayak .gif aq dah ganti pakai file .gif tetep gak bergerak
    3> cara bikin teks berjalan di bawah blog (gak ngaruh scroll mouse) kaya di berita kecil tv

    bila berkenan tolong jawab pertanyaan saya ini, kalau bisa sekalian artikelnya???

    BalasHapus
    Balasan
    1. Liat aja nih ada carannya disini ,,,http://habibcommunity.blogspot.com
      http://www.krtutorplus.com

      Jangan lupa liat juga blog ini ya ...
      http://java-gaib.blogspot.com/
      http://purworejo-cheat.blogspot.com/

      Hapus
    2. mana jawabanya gak nyambung

      Hapus
    3. menyorot link berganti warna: cari kode a:hover trus bagian color tinggal ganti aja warnanya contoh untuk link berubah warna menjadi merah saat di sorot kode warnanya color: #FF0000.
      contoh seperti ini:
      a:hover {
      text-decoration: none;
      color: #FF0000;
      }

      untuk kode warna yg lain bisa cari di mari http://www.w3schools.com/tags/ref_colorpicker.asp

      ganti logo dan teks berjalan terlalu panjang kalau dijelaskan disini, so tunggu postingan berikutnya.

      Hapus
    4. bukan link nya gan, namun mouse nya yang berubah warna gimana tuh. kalo link aq dah tau.

      sekalian tanya mengubah warna font artikel di blog gimana?

      Hapus
    5. owh kalo itu tinggal tambahin aja kode cursor:url(http://i1162.photobucket.com/albums/q539/komarking/JmKKursorgif-5.png),wait; di bagian a:hover tadi
      contoh:
      a:hover {
      text-decoration: none;
      color: #FF0000;
      cursor:url(http://i1162.photobucket.com/albums/q539/komarking/JmKKursorgif-5.png),wait;
      }

      untuk model kursor yg lain cari aja dimari http://photobucket.com/images/cursor

      Hapus
  4. untuk ganti warna font artikel: login ke blog > template > ubahsuaian > Tingkat Lanjut, lalu edit bagian warna text

    BalasHapus
  5. sudah saya coba gan gak bisa makanya saya tanya sini. kalau edit manual di html templte bisa?

    BalasHapus
  6. bisa gak ngubah kursor seperti di situs ini
    http://www.cursors-4u.com/sets/

    BalasHapus
  7. gan ngubah tombol share twit nya mrnjadi follow my twit gimana

    BalasHapus
  8. mksih gan info.na sangat berguna sekali,.,.
    liat blog que yg newbie eaa sob http://anakgedongan10.blogspot.com/
    sekali lagie mksih...

    BalasHapus
  9. tolong di like gann FansPage Kamii.. http://www.facebook.com/Citertasik

    Thanks All... :D

    BalasHapus
  10. selamt berakitivias

    kunjungi kami di ?! www.fansclub48.co.cc

    BalasHapus
  11. thanks gan info nya, langsung bisa di blog ane :y:
    jangan lupa kunjungan balik gan

    BalasHapus
  12. gan punya ane kok ngak nambah" walau pun dah di klik berkali"
    giman gan ??? :p: ane bingung :j: mohon pencerahanya :ab:

    BalasHapus
    Balasan
    1. yg gk nambah facebook, google atau twitter?

      Hapus
    2. twitter ma fb
      kok bisa gimana ya ?

      Hapus
  13. Minta tolong ni gan, kenapa ya saat aq pasang kode itu di blogku, nyambung dengan baris pertama postingannya. padahal sudah aq ikuti petunjuknya.
    lihat blog gan, jelek banget jadinya.

    BalasHapus
    Balasan
    1. maksudnya apaan gan, ane blom ngerti..

      Hapus
  14. gan mau tanya bikin kaya teks area tuh gimana yg kaya punya nya agan ni

    BalasHapus
    Balasan
    1. edit bagian quote, coba kesini http://www.mainbom.com/2012/04/membuat-warna-background-block-quote.html

      Hapus
  15. wah komentarnya rame,.... hehehehe

    BalasHapus
  16. wahhh makasihhhhh gan ini yang aku cari - cari...

    :o: klo ada waktu mampir ya ke blog sederhana ku
    http://www.lomoid.com

    BalasHapus
  17. gan, mau tanya ni.....
    punya ku dah muncul google, tweet & FB.....
    TAPI KOQ GAK DISA DI KLIK ya...........????
    :j:
    tu code aku paste di atas
    :z:
    HELP ME....................................

    BalasHapus
    Balasan
    1. gk bisa di klik maksudnya?
      atau kalo di klik angkanya gk nambah gitu?

      Hapus
  18. mantap gan, sdah saya pasang di blog saya,.
    tapi kenapa tombol share facebook nggak ada,,??

    BalasHapus
  19. wahhh nice info,, makasih banyak.. it's work!! ;)

    BalasHapus
  20. makasih gan' ini sangat membantu saya :D

    BalasHapus
  21. gan boleh minta template yg agan pke ..??

    BalasHapus
    Balasan
    1. http://www.savetemplate.com/2012/04/gamefusion.html

      Hapus
  22. thanks om keren dah blognya salam kenal :)

    BalasHapus
  23. mantap. ini dia yg ane cari. thanks gan.

    BalasHapus
  24. Alhamdulillah akhirnya dapat juga, maksih sob sharenya..saya udah coba di blog saya dan berhasil, sekali lagi makasih banyak atas sharenya..

    BalasHapus
  25. makasih tutorialnya, punya saya juga barusa dipasang fb like :D

    BalasHapus
  26. Mantab sob..
    makasih...
    di tempat ane kdg2 muncul kdg2 ngak tombolnya... :(

    BalasHapus
  27. kebetulan nih ane juga mau pasang itu. hehe..
    thanks atas infonya.
    kapan-kapan mampir ya ke blog ane http://nusanadaft.blogspot.com

    BalasHapus
  28. ane msh bingung gan,lg coba tapi blm berhasil,mampir gan ke blog ane www.kumpulanjamuherbal.blogspot.com

    BalasHapus
  29. Mantap sob, patut di praktekkan.

    BalasHapus
  30. Kalo dibawah postingan di wordpress gimana mas?

    BalasHapus
  31. artikel yg menarik nih.... wajib di coba.... :) thanks atas info menariknya....

    BalasHapus
  32. mantap...
    sudah saya pasang diblog saya gan :-bd

    BalasHapus
  33. Thanks gan tutorialnya, sudah saya pasang di blog saya

    BalasHapus
  34. kang...., kalo aku like tombol FB di artikel blog ku kok harus konfirmasi dulu ya...??
    trus urlnya itu : https://facebppk.com/plugin/eror/bla..bla..bla...
    and ndak muncul ke wall facebook...
    yang eror kira2 apanya ya...???
    mudah2an terjawab kang..., ni ane borkmark nunggu jawabannya
    blog ane : http://www.geliatjogja.tk ( maaf baru nata kontent masih copasiana semua)

    BalasHapus
    Balasan
    1. coba buka url ini http://tny.cz/7591b3b7

      Hapus
    2. Woyo..... makasih mastah....., langsung praktek.......,

      Hapus
  35. Terima kasih infonya..
    Sangat bermanfaat..

    BalasHapus
  36. bgus ni bisa memudahkan orang lain untuk share tulisan kita di jejaring sosial

    BalasHapus
  37. mantap...tapi-tetap-aja-gagal-pas-masang-di-Blog-saya..:(
    investasi-pc.blogspot.com

    BalasHapus
  38. terima kasih atas.. share nya.
    mantap..
    semoga sukses selalu
    salam ayobangkitindonesia

    BalasHapus
  39. wah..
    langsung terpasang bagus di blog ane..
    cek aja gan

    http://www.rangga-atmajaya.com/

    keren bangat gan..

    BalasHapus
  40. Tulisannya bermanfaat gan. apalagi untuk saya yang sedang masa labil untuk merbah tampilan blog :D

    BalasHapus
  41. mantapp, mampir juga http://roufhacker.blogspot.com/

    BalasHapus
  42. makasih infonya gan bisa saya pasang diblogku

    BalasHapus
  43. Wahh ini yang saya cari-cari, terimakasih gan atas ilmunya
    mampir juga http://kebal-online.blogspot.com

    BalasHapus