Home » , , » Cara Pasang Tombol Tweet, Google + dan Like Facebook

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..
Share this article :

60 komentar:

  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

    ReplyDelete
  2. 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???

    ReplyDelete
    Replies
    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/

      Delete
    2. mana jawabanya gak nyambung

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

      Delete
    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?

      Delete
    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

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

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

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

    ReplyDelete
  6. gan ngubah tombol share twit nya mrnjadi follow my twit gimana

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

    ReplyDelete
  8. tolong di like gann FansPage Kamii.. http://www.facebook.com/Citertasik

    Thanks All... :D

    ReplyDelete
  9. selamt berakitivias

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

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

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

    ReplyDelete
    Replies
    1. yg gk nambah facebook, google atau twitter?

      Delete
    2. twitter ma fb
      kok bisa gimana ya ?

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

    ReplyDelete
    Replies
    1. maksudnya apaan gan, ane blom ngerti..

      Delete
  13. gan mau tanya bikin kaya teks area tuh gimana yg kaya punya nya agan ni

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

      Delete
  14. wah komentarnya rame,.... hehehehe

    ReplyDelete
  15. wahhh makasihhhhh gan ini yang aku cari - cari...

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

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

    ReplyDelete
    Replies
    1. gk bisa di klik maksudnya?
      atau kalo di klik angkanya gk nambah gitu?

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

    ReplyDelete
  18. wahhh nice info,, makasih banyak.. it's work!! ;)

    ReplyDelete
  19. makasih gan' ini sangat membantu saya :D

    ReplyDelete
  20. Replies
    1. http://www.savetemplate.com/2012/04/gamefusion.html

      Delete
  21. thanks om keren dah blognya salam kenal :)

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

    ReplyDelete
  23. makasih tutorialnya, punya saya juga barusa dipasang fb like :D

    ReplyDelete
  24. Mantab sob..
    makasih...
    di tempat ane kdg2 muncul kdg2 ngak tombolnya... :(

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

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

    ReplyDelete
  27. Kalo dibawah postingan di wordpress gimana mas?

    ReplyDelete
  28. artikel yg menarik nih.... wajib di coba.... :) thanks atas info menariknya....

    ReplyDelete
  29. mantap...
    sudah saya pasang diblog saya gan :-bd

    ReplyDelete
  30. Thanks gan tutorialnya, sudah saya pasang di blog saya

    ReplyDelete
  31. 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)

    ReplyDelete
    Replies
    1. coba buka url ini http://tny.cz/7591b3b7

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

      Delete
  32. Terima kasih infonya..
    Sangat bermanfaat..

    ReplyDelete
  33. bgus ni bisa memudahkan orang lain untuk share tulisan kita di jejaring sosial

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

    ReplyDelete
  35. terima kasih atas.. share nya.
    mantap..
    semoga sukses selalu
    salam ayobangkitindonesia

    ReplyDelete
  36. wah..
    langsung terpasang bagus di blog ane..
    cek aja gan

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

    keren bangat gan..

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

    ReplyDelete
  38. mantapp, mampir juga http://roufhacker.blogspot.com/

    ReplyDelete
  39. makasih infonya gan bisa saya pasang diblogku

    ReplyDelete

Protected by Copyscape Duplicate Content Detection Software
 
Support : About Us | Contact Us | My Facebook
Copyright © 2013. Mainbom.com - Blogger Solution - All Rights Reserved
Checkpagerank.net