Cara Menambahkan Facebook Like Button Di Blogger

Hallo Teman...
Cara Membuat Facebook Like Button Di Blogger
Kali ini saya akan menuliskan panduan cara menambahkan Facebook 'Like' Button di blogger. Bagi siapa saja yang tertarik ingin menambahkan Facebook 'Like' Button di blog blogger tapi belum tahu bahaimana caranya silakan baca terus tutorial Cara Menambahkan Facebook Like Button ini, dan bagi teman-teman yang sudah tau caranya silakan koreksi, jika ada yang salah silakan di tegur ya...

Ok Langsung saja ...

Tutorial Cara Menambahkan Facebook Like Button Di Blogger

Seperti biasa, pertama silakan login dulu ke blogger

Setelah itu silakan klik Design / Rancangan / Tata Letak, kemudian klik bagian Edit Html

Update 5 April 2012 (Penambahan Gambar)

  • Panduan Untuk Blogger Baru
  • Panduan Untuk Blogger Lama

Tutorial Cara Pasang Facebook Like Button Di Blogger

1. Klik menu seperti ini


2. Klik menu / tulisan Template
3. Klik menu Edit HTML
4. Klik tulisan / menu Lanjutkan
5. Beri centang pada Expand Template Widget

Panduan Cara Menambahkan Facebook Like Button Di Blogger Di Blogger Lama

1. Klik Menu Rancangan / Design
 2. Klik Menu Edit Html
 3. Beri Centang Pada Bagian Expand Template Widget

Update End.
Cari Kode
]]></b:skin>
Letakkan kode berikut di atas ]]></b:skin> tadi
.fb_like_box {
-moz-border-radius:5px 5px 5px 5px;
border-radius:10px;
background:#f5f5f5;
border:1px dotted #ddd;
margin-bottom:10px;
padding:10px;
width:500px;
height:20px;
}
Penting Untuk Diketahui !!!
Silakan ganti kode yang saya beri warna merah (500) dengan ukuran lebar yang sesuai dengan template teman.

Simpan dulu dengan cara mengklik tombol Simpan / Save (Letakknya di bawah).

Beri centang pada pada bagian Expand Widget Templates.

Masukkan kode berikut di bawah kode <data:post.body/>

<div class='fb_like_box'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='400'/>
</div>
Sekarang silakan simpan kembali template anda dan silakan lihat hasilnya, apakah Facebook Like Button nya sudah terlihat.

Oh ia ...
Jika anda meninginkan Facebook Like Button nya terlihat di halaman posting saja silakan pasang kode yang ini, kode di atas tidak perlu di pasang.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='400'/>
</div>
</b:if>
Selamat Mencoba dan semoga berhasil ...


Artikel ini telah saya update pada tanggal 13/06/2011
Terakhir pada 5 April 2012

Baca Juga : Panduan Cara Pasang FB Like, Twitter Share, dan Google +1 Di Blogger

65 comments:

  1. bisa enggak kalau pake HTML/JAVA SCRIPT ...????

    ReplyDelete
  2. barusan saya coba dan berfungsi mas, makasih, cuma masalahnya adalah, knapa tiba2 disamping tombol "like"-nya tertulis "334,010 people like this. "
    gila bener mas, saya takut nanti dikira meng manipulasi/menipu. bisa dijelaskan kira2 gimana itu ?
    makasih ^^

    ReplyDelete
  3. Mas Dheny ...
    Terimakasih telah memberi komentar.
    Kode sudah saya update, silakan gunakan kode yang baru

    ReplyDelete
  4. Sama seperti kasusnya Dheny <------

    tapi akhirnya bisa juga

    ReplyDelete
  5. gan mantapz... tapi yang dibelakang href harusnya link fanpage web masing" hehe soorry kalo menggurui :D
    Visit Back ya ;-)
    www.blogbelajarpintar.blogspot.com

    ReplyDelete
  6. wow...mantapz gan,sy jg dah nyoba.cman gmn cara penempatanx agr lebih cenring lg.thx

    ReplyDelete
  7. Yang kode kedua tu ga bisa di pake ya ??

    ReplyDelete
  8. ko sulit ya mas??ga ad perubahan??padahal uda ngikutin semua petunjuknya

    ReplyDelete
  9. luar biasa gan, thanks ya :)

    ReplyDelete
  10. gimana cara membuat postingan supaya code a href ditad kelihatan di beranda?

    ReplyDelete
  11. SAYA MASIH BINGUNG SEBAB SAYA NEWBIE BANGET
    DI COBA GAGAL LAGI GAGAL LAGI GAGAL LAGI

    ReplyDelete
  12. makasih gan, tapi kenapa ya, ukuran panjang garis kepanjangan dari jatah template posting saya, mohon di bantu. coba cek di www.imgmusik.com
    mohon petunjuknya....

    ReplyDelete
  13. @Ibnu Hr.
    Silakan mas ganti kode css nya dengan kode berikut.

    .fb_like_box {
    -moz-border-radius:5px 5px 5px 5px;
    border-radius:10px;
    background:#f5f5f5;
    border:1px dotted #ddd;
    margin-bottom:10px;
    padding:10px;
    width:485px;
    height:20px;
    }

    Terimakasih

    ReplyDelete
  14. gan gok di blog jadinya setelah artikele di klik baca selanjutnya Button like nya hilang gan

    mohon bantunya gan....
    saya anak baru

    ReplyDelete
  15. Mantap gan.... nice inpoooo.... Visit me back OK.... http://sahrodi.blogspot.com/
    :)

    ReplyDelete
  16. keren bang....
    mampir 'n' follow balik yah.... http://yosefcutttingsticker.blogspot.com

    ReplyDelete
  17. mantap bos.........good share....sya masih pemula kalau urusan blo.....hehehehe
    coba join kesini juga ya bos....hehehe

    http://ibuponsel-beta.blogspot.com/

    ReplyDelete
  18. Sangat Bermanfaat dalam meningkatkan traffik... trimakasi telah berbagi....

    ReplyDelete
  19. Sippp bang infonya. lama muter2 akhirnya nemu jg disini hehehe

    ReplyDelete
  20. hemm,,saya udah coba gan,,tapi gak muncul,,yang muncul hanya warna putih,,tapi button fb nya gak ada?

    ReplyDelete
  21. @nas_phie fb like di blog ini bisa dilihat engga. soalnya script itu sama dengan yg saya pasang di blog ini. coba di muat ulang halamannya.
    Oh ia,,, ntar scriptnya akan saya cek lagi.

    ReplyDelete
  22. thanks infonya, sangat bemanfaat

    ReplyDelete
  23. bang, di template saya gak ada code ini :
    saya pke template standard, gimana bang jadinya?

    ReplyDelete
  24. Terima kasih atas infonya, sangat berguna sekali terutama bagi saya yang masih pemula dalam ber-bloging ria ini.. :D

    ReplyDelete
  25. Yah...
    di coba di blog ku kok nggak muncul ya?....
    kasi solusi nya donk...

    ReplyDelete
  26. maturnuwun ilmune kang....langsung dicoba ah...

    ReplyDelete
  27. Thanks masbro... penjelasannya lebih komplit dari blog sebelah :)

    ReplyDelete
  28. Admin, kode nya nggak ada.. Gimana?

    ReplyDelete
  29. Nice Share,,very helpful to me personally,,thank's

    ReplyDelete
  30. bagus juga nih gan tp ane sulit untuk cari kode yang keduanya...soalnya gax ada nihhhh

    ReplyDelete
  31. @DiAnZ ada kok. coba Beri centang pada pada bagian Expand Widget Templates, baru kode tersebut bisa ditemukan.

    ReplyDelete
  32. Thanks ya gan... smoga blog ini semakin sukses..

    ReplyDelete
  33. komentar sama likenya kok bisa ilang ya?
    padahal kemarin ada..
    tombol buat like sama comentnya jga jd gak ada?

    ReplyDelete
  34. mas saya ada masalah dengan kode , kode tsb ada 4 macam, trus saya ambil yang mana ya? mohon pencerahannya, thanks..

    ReplyDelete
  35. #Fixed
    makasih kk saya dah utak atik & hasilnya ada like button nya. makasih tutornya sangat berguna!

    ReplyDelete
  36. thank's sob, sudah ane coba & berhasil .... , suwun.

    ReplyDelete
  37. oke terima kasih gan,,, selsai tugas ku

    ReplyDelete
  38. makasihhhhhhh buanyakkkk Agan..

    Trus Berkarya...

    ReplyDelete
  39. skrg tampilan bloggernya sdah lain... jd gimana?? klo dgn tampilan blogger yg skrg sy tdk ngrti

    ReplyDelete
  40. Thanks banget dah memberitahu caranya..

    ReplyDelete
  41. Thanks banget karena udah ngebantu saya banget,. :)
    ijin buat ngeshare artikelnya iyam, :)

    ReplyDelete
  42. MANTABBBBB!!!! PERTAMAX GAN!!!

    ReplyDelete
  43. Mas Bro..ko ga muncul ya dah di coba....gmn donk solusinya??

    ReplyDelete
  44. aduhh suka GATOT ka pakek cara ini gan ... ada yg pake javascript???

    ReplyDelete
  45. nyari kode ini susah bener....!

    ReplyDelete
  46. Tak coba dulu ya gan.?

    ReplyDelete