Monday, December 5, 2011

Cara Pasang komentar Fb berjejer dengan Komentar Blog

Kumpulan cara Seo Hack Blog Facebook
Beberapa waktu yang lalu setelah menshare Cara Pasang kotak komentar Facebook di Blog baik itu Part1 Part2 dan Part3, Kumpulancara kembali menemani sobat blogger untuk mempercantik tampilan komentar di blog kita agar kelihatan Rapi dan keren. Pada tutorial yang lalu yakni cara pasang kotak komentar facebook di blog, Komentar Blog dan komentar facebook Berada tidak sejajar atau komentar Fb ada di atas komentar Blog, dan ini membuat blog keliatan sedikit kurang dinamis.
Dengan cara berikut ini juga akan mempermudah Sobat Blogger yang belum pasang Kotak komentar FB  tanpa buat Aplikasi sendiri lagi, Tapi sayang bagi sobat yang sudah pasang Kotak komentar cara lama akan kehilangan Komentar Fb, tapi Komentar Blog tetap ada.
Untuk Melihat Hasil Cara berkut Sobat bisa lihat Contoh di blog ini : Bawang Putih, disana Pengunjung bebas memilih menggunakan kotak komentar Fb atau Blog, Namun disarankan bagi Sobat Blogger sebaiknya meninggalkan komentar di komentar Blogger.

Note : Tidak Semua Template Mendukung Cara ini
Baiklah Mari Kita Mulai
Pertama
Silahkan sobat ke Account Blog masing-masing dan Pergilah ke Rancangan Lalu Edit HTML dan centanglah dulu Expand Template Widget
Note : Ingat Jangan Lupa Download Template Lengkap Untuk Menjaga Kesalahan.

Kedua
Tekan tombol Ctrl + F pada Keyboard anda, Lalu cari code Berikut :
<div class='comments' id='comments'>
Setelah ketemu Silahkan Copy dan Paste code dibawah ini Tepat dibawahnya
Ini Code nya :
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing
Notw num_post='2' yakni jumlah komentar yang akan ditampilkan, silahkan diubah sesuai keinginan

Maka Hasil akan Seperti ini :
<div class='comments' id='comments'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Ketiga
Sekarang carilah Code </head>
Lalu silahkan Letakkan Code Berikut Tepat diAtasnya
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Sobat disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

Maka hasil akan seperti ini :
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB Sobat disini' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
</head>


Note : Ganti ID FB Sobat disini dengan ID Facebook Masing-masing, Cara Melihat Id Facebook seperti berikut : https://www.facebook.com/daenkrhapy
Nama atau Angka dibelakang Alamat Fb sobat, itulah Id Nya.

Keempat
Cari Lagi Code ini  /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang semirip Mungkin
Lalu Letakkan Code Berikut di Bawah nya
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Kelima
Silahkan Klik Pratinjau dulu apakah Peletakan Code sudah Benar Atau tidak, Jika tidak ada masalah Silahkan Klik SIMPAN

Catatan:
Dengan menggunakan cara ini sobat tidak bisa mengontrol atau mengetahui siapa saja yang komentar di fb coomment blog sobat, karena kita tidak menggunakan aplikasi sendiri.

Selamat Mencoba

Cara Pasang komentar Fb berjejer dengan Komentar Blog Rating: 4.5 Diposkan Oleh: Sarjana Cebong

74 komentar:

  1. wauuuu....
    mantap gann,,
    langsung ane coba detik ni jugak, :)

    http://wanbule.com

    ReplyDelete
  2. Al-hamdulillah, saya coba di blog Materi Dakwah Islam dan Kultum langsung berhasil. Terima kasih tutorialnya.

    ReplyDelete
  3. Allhamdulilah Akhirnya Jadi juga.. Dan hasilnya sungguh luar biasa.. Terima kasih sob tipsnya. sangatt berarti sx buat saya.. Salam Blogger Indonesia :)

    ReplyDelete
  4. sip manaf kang,,,,,trims banget info nya... langsung tak coba di blog q langsung beres

    ReplyDelete
  5. untuk memperindah blog yang kita punya langsung ajj deh ke te ka pe...
    makasih banget gan udah ngasil tipsnya mulai dari 1 sampai yang ini...

    ReplyDelete
  6. keren2 .. thanks infonya..
    mampir ke sini jg gan http://ngalamcity.com

    ReplyDelete
  7. wahh bagus nih caranya.. thanks..

    ReplyDelete
  8. Wah gak jadi gan, mungkin ada yang salah kali gan, maaf sebelumnya loh gan, emang udah dicoba tapi tetep gak jadi..
    Thanks for infonya

    ReplyDelete
  9. terima kasih sekali gan atas infonya yang membangun, saya akan selalu belajar dari blog juragan, salam kenal.
    http://caramembuatyangakumau.blogspot.com

    ReplyDelete
  10. B E R H A S I L.. Terima kasih instruksinya..saya udah bisa pasang fb comment seperti yg di rupadunia.blogspot. Thank you so much.

    ReplyDelete
  11. Gan, nanya dong,
    setiap yang komentar di blog, notifikasinya terkirim ke akun facebook kita gak??

    ReplyDelete
  12. @Maxi : Ga Gan.. Komentar Fb nya akan Muncul di Status orang yg Komentar tersebut, jadi manfaatnya yakni kita Kecipratan trafik jika teman yg komentar tsb banyak.
    Trims

    ReplyDelete
  13. mau nanya mas,
    gimana caranya kita tau kalau artikel kita ada yang komentari?

    ReplyDelete
  14. buset, banyak banget skrip nya. pusing ane gan...

    ReplyDelete
  15. Ini yang ane cari2 gan, maw dicoba dulu... thanks

    ReplyDelete
  16. makasihhhhhh......
    izinnnnn copas ke blog aku yaaaa
    comand balek dongggg...
    :D
    maaf baru fermulaaaa

    ReplyDelete
  17. Trima kasih info triknya, walaupun saya belum praktekkan sekarang, tapi ini sangat membantu saya. Saya akan segera coba

    ReplyDelete
  18. Ass. Bos klo cara mengetahui id facebooknya gimana yah?mhn penjelasannya dikarenakan gagal melulu mungkin dari pengisian id facebooknya ane salah jadi gak jd2 tipsnya, maklum ane masih pemula.Mhn untk diblz

    ReplyDelete
  19. ane pernah coba gan
    tapi gak tau kenapa kurang support ma template blog ane

    ReplyDelete
  20. Share yang bagus. cuma space yang tersedia nggak cukup ketika comment di fb page lebih dari dua dengan kalimat yang agak panjang. perlu di tambah style='overflow:auto; height:280px' pada: div class='comments-page' id='fb-comments-page' sehingga menjadi: div class='comments-page' id='fb-comments-page' style='overflow:auto; height:280px'. baru space yang sempit di blog saya bisa muat. salam hangat.

    ReplyDelete
  21. kok ada tulisan(link) "Moderator View" sama "Settings" ?? gimana ni gan??

    ReplyDelete
  22. ohh.. skrng ane taau maksudnya gan :D,, yang post tentang moderator tadi ga usah ditampilin ya gan.. hehe

    ReplyDelete
  23. GA ada masalah tapi tetep ga ada perubahan.

    ReplyDelete
  24. mantep gan,. tapi aga puyeng,.. jangan lupa mampir ke bog ane,.

    ReplyDelete
  25. mathursuwon,,, ilmunya,,,,,, salam,,kenal gan,,,,

    ReplyDelete
  26. mantap gan, behasil. tapi koment fbnya lari keman ya? soalnya ane ud ga pernah buka FB nei.makasih ya btw.

    ReplyDelete
  27. numpang lapak omm www.nyompu.co.cc

    ReplyDelete
  28. thanks gan tutorialnya, tp ko tetap ga bisa ya di blog ku http://huznasouvenir.blogspot.com/ apa mungkin ga cocok ma templatenya ya...., btw thanks dah share.........

    ReplyDelete
  29. bisa ,,tapi tampilan fbnya ga ada perubahan ??

    ReplyDelete
  30. gan punya ane ko da yang muncul ada yang engga ya di postingan? apa yang salah ya, semua tepat di masukin, tapi yang terakhir ane ada yang bingung. punya ane adanya ini
    /* Comments
    ----------------------------------------------- */
    ane taruh tu kode di bawah garis gari tersebut gan. hasilnya ya emang muncul, tapi postingan tertentu dia ga muncul e. kenapa ya? apa emang begitu? nunggu waktu dulu?

    ReplyDelete
  31. makasih bang, ud bisa. tapi ya ga di semua posting ada. ada juga yang ga ada fbnya. kenap bang ya?

    ReplyDelete
    Replies
    1. ya ane juga ngalami, kenapa ya,, awalnya berhasil terus pas ada yang komentar di mode blogger komentar bis tu komentar fb nya hilang..... ga muncul lagi.....

      Delete
  32. Nikmati berbagai keuntungan membeli di sini :
    http://www.wellcome-shop.blogspot.com/
    * Barang berkualitas dan harga relatif lebih murah
    * Dapat diantar ke seluruh Indonesia
    * Keamanan dijamin karena setiap pengiriman disertai asuransi
    * Proses cepat dan sederhana
    * Produk terbaru dan uptodate
    * Produk yang kami tawarkan merupakan produk baru (tersegel) Original dan bergaransi resmi
    1 Tahun kualitas terjamin karena bukan merupakan barang Replika/Rekondisi ataupun buatan CINA

    ReplyDelete
  33. jika butuh jasa foto prewedding, wedding, family, baby, event, personal dll.
    Bisa langsung hubungin :

    Office : Jl.Pinang Baru No.168
    E-mail : [email protected]
    Website : www.oneyephotowork.com
    No Telp : 085697164118 (irvan)

    ReplyDelete
  34. wah bermanfaat banget mas infonya...:)

    saya udah coba dan berhasil...arigato...:)

    ReplyDelete
  35. permisi numpang lewat boss...
    saya jual berbagai macam produck kosmetik, perawatan tubuh, alat bantu pria / wanita, obat kuat, dll...
    berminat bisa kunjungi website saya,
    http://alatbantuvitalitas.com
    http://langsingku.indonetwork.co.id
    trima kasih....

    ReplyDelete
  36. Saya menyukai tampilan website Anda dengan materi yang dibahas di dalamnya. Saya akan kunjungi beberapa waktu lagi untuk melihat informasi baru dari Anda. Kalau ada waktu dan kesempatan main juga donk ke situs saya berikut…

    Setyo

    http://investasiusaha.com/?id=setyoadi


    Cukup 1 x Investasi Untuk Seumur Hidup, sebuah KESEMPATAN EMAS untuk mengubah kehidupan dan kondisi finansial anda ke arah yang lebih baik.

    ReplyDelete
  37. waduh, nyari kemana2 ternyata disini jg nyasarnya hehehe..
    makasih om..
    fantastic
    ane olah tkp dulu

    ReplyDelete
  38. wah keren banget nich , dah nyobain berhasil nich ,, makasih gan ,, :D

    ReplyDelete
  39. This comment has been removed by the author.

    ReplyDelete
  40. wah bagus sob bisa berjejer ya,,,
    makasih tutorialnya

    wilujeng ngeblog

    ReplyDelete
  41. Mkasih ya Info nya.. sebagai ganti terima kasih ntar aku share deh info langsng dari situs ini ke temen2

    ReplyDelete
  42. salam kenal,
    thanks,
    sangat membantu,
    akhirnya jadi juga..............

    ReplyDelete
  43. warna latar belakang website, apa bisa diganti ????

    ReplyDelete
  44. Terima kasih mas, akhirnya bisa saya terapkan dan berhasil

    ReplyDelete
  45. saya berhasil. and bisa share link ini ke rekan2

    ReplyDelete
  46. Its Kesenangan untuk memahami blog Anda. Artikel di atas cukup luar biasa, dan aku benar-benar menikmati membaca blog Anda dan poin yang Anda dinyatakan. Saya sangat suka muncul kembali secara khas, posting banyak lainnya yang berjarak topik. Terima kasih untuk berbagi ... terus menulis!

    ReplyDelete
  47. sangat lengkap ini infonya ... boleh ni buat di pelajari

    ReplyDelete
  48. sangat bermanfaat sekali infonya buat saya, bisa menambah informasi di blog ini

    ReplyDelete
  49. wahh mantap banget nihh... terimakasih tutornya kang

    ReplyDelete
  50. sukses gan tapi form komentar bloggernya g kluar to..
    bisa bantu ??

    ReplyDelete
  51. coba dulu ah...trims tipsnya gan...

    ReplyDelete
  52. makasih mas infonya sangat berharga, add mas blog saya sepi banget gak ad teman maklum baru belajar

    ReplyDelete
  53. Udah Ane Praktekkin BRO...Thanks

    Kunjungi Juga Ya BLOG Saya :)

    ReplyDelete