Sekolah Forex Indonesia
Anda Di : Home » blogger script » blogger tutorial » Cara Menambahkan Facebook Like Button Di Blogger

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
Posted by Ahmad Rifai on 9:59 PM | 66 komentar
Tags: ,

Jangan Lupa Like dan share artike Cara Menambahkan Facebook Like Button Di Blogger ini ya.

New Tutorial :
Cara Menambahkan Facebook Like Button Di Blogger

Tentang Admin

Hanya seorang blogger biasa yang ingin mencoba menulis apa saja yang bisa di tulis, baik seputar tutorial blog, blogger template, dsb.

Berlangganan via RSS Feed

Mau baca artikel terbaru langsung di Email kamu? Silahkan masukan alamat email kamu untuk berlangganan artikel baru. (GRATIS!!!)

Jangan lupa konfirmasi di Email Kamu.

Saat ini kamu sedang berada di halaman Cara Menambahkan Facebook Like Button Di Blogger, di bawah ini ada beberapa artikel lainnya yang mungkin ingin kamu baca, terimakasih atas kunjungannya.

66 komentar

  1. Ronan Elektron
    April 12, 2011 at 12:02 PM

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

  3. Dheny
    June 12, 2011 at 11:11 PM

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

  4. Ahmad Rifai
    June 13, 2011 at 1:00 AM

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

  5. triMasketir
    June 26, 2011 at 12:08 PM

    Sama seperti kasusnya Dheny <------

    tapi akhirnya bisa juga

  6. Bobepi(Blogbelajarpintar)
    July 4, 2011 at 2:00 PM

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

  7. my faceside
    July 29, 2011 at 9:08 AM

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

  8. Fikri Haikal
    September 6, 2011 at 11:25 AM

    Yang kode kedua tu ga bisa di pake ya ??

  9. lucky andriansyah
    September 12, 2011 at 6:39 AM

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

  10. Sam Samsul
    October 1, 2011 at 7:36 AM

    luar biasa gan, thanks ya :)

  11. gameterbaik
    October 22, 2011 at 2:26 PM

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

  12. tcah_lanang
    October 30, 2011 at 5:03 PM

    SAYA MASIH BINGUNG SEBAB SAYA NEWBIE BANGET
    DI COBA GAGAL LAGI GAGAL LAGI GAGAL LAGI

  14. Ibnu Hr
    November 17, 2011 at 11:33 AM

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

  15. Ahmad Rifai
    November 17, 2011 at 8:08 PM

    @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

  16. Daanish
    November 25, 2011 at 11:49 AM

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

    mohon bantunya gan....
    saya anak baru

  17. MOCH. SAHRODI
    December 10, 2011 at 6:32 PM

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

  19. yosef samarta
    December 19, 2011 at 3:03 AM

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

  20. menk
    December 20, 2011 at 1:58 PM

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

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

  22. Unknown
    December 30, 2011 at 11:37 PM

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

  23. Ary_Putra
    January 9, 2012 at 1:49 AM

    Sippp bang infonya. lama muter2 akhirnya nemu jg disini hehehe

  24. nas_phie
    January 18, 2012 at 1:15 PM

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

  25. Ahmad Rifai
    January 18, 2012 at 8:15 PM

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

  27. gibran
    February 7, 2012 at 12:58 PM

    thanks infonya, sangat bemanfaat

  29. Satanic_D
    February 9, 2012 at 4:21 PM

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

  31. Kam@ndanu
    February 16, 2012 at 4:00 PM

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

  33. Merya
    February 23, 2012 at 4:16 PM

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

  34. BALSA SOPHIE ONLINE
    February 29, 2012 at 10:27 PM

    maturnuwun ilmune kang....langsung dicoba ah...

  35. SaputraMZ
    March 5, 2012 at 2:32 AM

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

  36. Ananda Multzam
    March 13, 2012 at 6:40 PM

    Admin, kode nya nggak ada.. Gimana?

  39. B'art
    March 27, 2012 at 1:03 PM

    Nice Share,,very helpful to me personally,,thank's

  40. DiAnZ
    April 4, 2012 at 9:10 AM

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

  41. Ahmad Rifai
    April 5, 2012 at 5:32 AM

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

  42. Teguh
    April 16, 2012 at 11:35 AM

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

  43. Gilsur Hero
    April 20, 2012 at 10:02 AM

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

  44. DANIARIS
    April 24, 2012 at 2:59 PM

    makasi ya kaka' info nya.........

  45. Admin
    April 30, 2012 at 6:07 AM

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

  46. Admin
    April 30, 2012 at 6:22 AM

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

  48. Mas Mansur
    May 9, 2012 at 9:35 AM

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

  49. subroto id
    May 13, 2012 at 4:02 PM

    oke terima kasih gan,,, selsai tugas ku

  52. imam. k
    May 17, 2012 at 7:48 PM

    makasihhhhhhh buanyakkkk Agan..

    Trus Berkarya...

  53. "Made Wijayanti Rahayu"
    May 18, 2012 at 12:44 PM

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

  54. kanggurukoe
    May 19, 2012 at 5:28 AM

    Thanks banget dah memberitahu caranya..

  55. Bayu Satria Kusuma
    May 25, 2012 at 12:11 AM

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

  56. Rock radio
    May 31, 2012 at 1:35 PM

    MANTABBBBB!!!! PERTAMAX GAN!!!

  57. Yunie Yusuf
    June 5, 2012 at 5:40 PM

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

  61. Haidhar666™
    June 20, 2012 at 12:42 AM

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

  64. RizKy Blog
    June 30, 2012 at 6:45 PM

    nyari kode ini susah bener....!

Newer Post Older Post Home