Ideini.Com | Situs Informasi Terkini!

Situs Media Informasi Online Yang Berisi Info Info Menarik, Terbaru dan Terhangat | Entertaiment | Teknologi | Olahraga | Hiburan

Membuat Kotak Komentar Facebook dan Blog Berdampingan (News)

Membuat Kotak Komentar Facebook dan Blog Berdampingan, nah seperti judulnya yang akan kita bahas yaitu Membuat Kotak Komentar Facebook dan Blog Berdampingan, postingan ini juga merupakan salah satu request dari teman saya yang meminta dicarikan Tutorial Membuat Kotak Komentar Facebook dan Blog Berdampingan, dan sekarang requestnya sudah saya penuhin, Kotak komentar, kamu pasti  sudah tahukan tentang kotak komentar, jadi tidak perlu di jelasin lagi, disini ideini hanya ingin menjelaskan cara Membuat Kotak Komentar Facebook dan Blog Berdampingan, mungkin kamu sudah pernah menggunakan Plugins kotak komentar facebook yang lama, dan pasti hanya tunggal, yaitu facebook saja, sekarang ideini membuat  agar keduanya antara facebook dan blog berdampingan, oya sebelum membuat yang harus diingat yaitu, jika kamu pernah menggunakan Plugins Fb Comment yang lama, dan ingin mengganti dengan ini, maka semua comment yang lama akan hilang, tapi ini hanya berlaku untuk Plugins fb coment, sementara untuk comment blog akan tetap ada. oke langsung saja ke TKP, Langkah langkah Membuat Kotak Komentar Facebook dan Blog Berdampingan :

1. Masuk ke Blog anda.

2. Pilih 
Layout/Tata Letak ► Edit HTML

3. Saya sarankan untuk membackup template anda dengan mengklik 
Download Full Template untuk berjaga jaga jika terjadi kesalahan.

4. Centang kotak yang bertuliskan
Expand Widget Template. 


5. Setelah itu cari code <div class='comments' id='comments'> gunakan ctrl + F untuk mempermudah pencarian.

6. Setelah ketemu letakan code berikut ini Tepat dibawah <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'>

Dan hasilnya 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'>
Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing

7. Sekarang cari lagi Code </head>


8. Jika sudah ketemu silahkan Letakkan Code Berikut Tepat di Atas code 
</head>

<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>  
Dan hasilnya 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 tinggal buka profil kamu terus lihat code di belakangnya, bisa berupa angka atau tulisan, atau nama, contohnya seperti berikut : https://www.facebook.com/bayurifai.tk
Nama atau Angka dibelakang Alamat Fb sobat, itulah Id Nya.
 

9. Sekarang Cari Lagi Code ini  /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang mirip dengan code diatas.
Lalu Letakkan Code Berikut tepat 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;}

10. Sekarang Silahkan Klik Pratinjau dulu untuk melihat sudah benar atau belum, Jika sudah benar dan tidak ada masalah Silahkan Klik SIMPAN.

  Ini sedikit Screeshootnya :




47 komentar untuk "Membuat Kotak Komentar Facebook dan Blog Berdampingan (News)"

  1. Tapi dalam tampilan ponsel blog ini kok belum kelihatan box komentar facebook ya?
    Salam kenal kawan.

    BalasHapus
  2. jahhh,, tadi form komentarnya kagak ada,, skrg baru muncul,, ckckkc.. :D maksudnya itu form komentar FB sama blogger jadi berdampingan ya sob..? keren2,, ehhehe,,

    BalasHapus
  3. Hehehe,,lagi lelet mungkin sob, iya sob ne kotak komentarnya berdampingan kyk yang di screenshot, requst dari agan Liandri ni,,

    BalasHapus
  4. ZONA DOWNLOAD GRATIS11 Desember 2011 21.30

    wah ini yang saya minta sudah di penuhi, terimakasih banyak sob. segera tak coba

    BalasHapus
  5. siipp sama sama sob, Good Luck sob :D

    BalasHapus
  6. mantap sob, udah ane terapkan diblog ane. makasih banyak y.
    sekalian goyang anu

    BalasHapus
  7. Oke deh sob sama sama, goyang balik ntar :D

    BalasHapus
  8. Heery# maaf baru di balas commentnya, saya baru menggunakan plugins ini, kemaren kemaren belum saya gunakan, makasih atas kunjunganya :)

    BalasHapus
  9. wiiih..... keren banget bs komen dr ID FB jg. wordpress bs ga yo....

    BalasHapus
  10. Shireisho# hehe,,kalau wordpress ane belum tahu sob :) mudah mudahan aja ntar bisa di akali sama yang udah master :)

    BalasHapus
  11. ga berhasil.. apanya yang salah ya? padahal waktu disimpan ga ada gangguan. tapi tampilan komentar sama aja. tolong dicek, mas.. http://paman-guru.blogspot.com/

    BalasHapus
  12. terima kasih atas informasinya yang sangat bermanfaat dan mudah untuk dicerna

    BalasHapus
  13. Paman guru# kemungkinan ada salah pada penempatan dan mungkin tidak cocok dengan templatenya, :)

    Rudy Hartono# Sama sama sob, senang bisa membantu :D

    BalasHapus
  14. gan tahap yg ke-9 itu kode #comments atau /* di tempatin dimana? kan ada banyak kode yg sprti itu? thx before :)

    BalasHapus
  15. sukague.com# selamat sob :D

    Bayu AW# gini sob, coba cari dulu kode yang #comments, kalau ada paste kode tadi setelah kode yang dicari tadi. Ingat! tepat setelahnya, kalau ada kode misalnya #comments /, jang letakan setelah garis miringnya tetep setelah kode #comments, jika masih kurang jelas bisa coba kirim HTML Templatenya ke Email saya, nanti saya coba buatkan :D

    BalasHapus
  16. agaaaaaaan! alhamdulilah udah berhasil :D
    mkash yaah :kiss:
    awwww :3

    BalasHapus
  17. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  18. vira elyansyah# selamat gan, makasih udah berkunjung :)

    BalasHapus
  19. Thanks juragan !
    Bermanfaat.

    yang lagi nyari cara nyembunyiin header dan footer feedjit cek dimari:
    http://www.galatema.com/2011/12/cara-menyembunyikan-header-footer.html

    BalasHapus
  20. Wah...makasih ya infonya mas....

    http://iniblogane.blogspot.com

    BalasHapus
  21. galatema# sama sama sob :D

    AWAL# Yupz sama sama sob :D

    BalasHapus
  22. q akan coba yang ini sob, mudah2an berhasil di Blogadexme.
    tapi kode diatas banyak amat sob, saran q klw bisa di Upload aja ke googlecode biar nanti tidak membuat Blog Berat loadingnnya...!
    Thanks sobat! Happy Blogging!

    BalasHapus
  23. Blogadexme# itu yang sebagian udah pake google code sob, tinggal sedikit yang di upload ke googlecode :) makasih saranya sob

    BalasHapus
  24. Makasih ya mas....udah berhasil, tapi hasilnya ngga sama..
    ngga sampingan, tapi atas bawah...ngga tau salahnya dimana..

    http://iniblogane.blogspot.com

    BalasHapus
  25. Awal# itu salahnya pas penempatan code di #comments
    Letakan scriptnya pas setelah kode yang di tulis di atas, misal codenya
    #comments {
    letakan kode sebelum tanda kurung
    #comments DISINI KODENYA {

    Silahkan dicoba sob

    BalasHapus
  26. ko pnya km gx ada Komentar Facebook dan Blog Berdampingan ch???

    BalasHapus
  27. Hendro# Sengaja nggak di pasang sob, hehe

    BalasHapus
  28. Thanks mas... berhaisil ne...

    BalasHapus
  29. punya saya kok bertindih sob komentarnya... bukannya berdampingan.... http://www.adhiesbook.co.cc

    BalasHapus
  30. Adhiesbook# itu biasanya salah pada penempatan kode setelah "#comments" ,
    langsung saja copy kodenya setelah kode di atas, jangan setelah kode "{"

    BalasHapus
  31. Masih Tak bisa gan Apanya yang salah ya...

    tunggu kunjungannya ya gan
    www.jualmobilbatam.com

    BalasHapus
  32. idin rohidin# Kemungkinan ada yg salah, atau templatenya tidak support sob,,

    BalasHapus
  33. Cristian Tatelu# sama sama sob :)

    BalasHapus
  34. berhasil, makasih dah share

    BalasHapus
  35. gag bisa bisa gw mas
    udah 5 kali bongkar pasang srip
    hasil nya sama aja :/

    gimana yaah.?
    yang udah jadi ajarin donK
    bingung bgt ni cara nya :/

    BalasHapus
  36. Mantapp sob.. lgsng sy praktek kan.. rencana cari tmplate bru dlu trus nnti pake ini sob.. makasih banyak yah sob

    BalasHapus
  37. Irwanz'blogs# kadang template ada yg gag support sob,

    Bagas# ok sob sama sama :)

    BalasHapus
  38. ok sob rencana ganti tmplte dlu nih trus cobain caranya sob.. makasih banget yah gw request lgsng di buatin heheeee

    BalasHapus
  39. Nicky Oktavian# Siip sama sama sob, semoga bermanfaat :)

    BalasHapus
  40. makasih banget infonya gan , salam kenal

    BalasHapus
  41. LintasArtikel dot in# Ok sob, sama sama, salam kenal kembali :)

    BalasHapus
  42. Akhrinya ketemu, muali tadi nyari2 Heheheh

    BalasHapus
  43. tips dan peluang bisnis# silahkan dicoba sob :)

    BalasHapus