Membuat Komentar Facebook Berdampingan dengan Komentar Blog

Membuat Komentar Facebook di Blog selain dapat membuat blog terlihat lebih bagus dan rapih, para pengunjung pun akan lebih di mudahkan dalam berinteraksi dengan anda melalui Kotak komentar karena sebagian pengunjung anda pastinya ada yang sudah login ke akun Facebook, jadi mereka pun akan ebih mudah berkomentar.

Tetapi jika kita menambahkan komentar Facebook dan etap mempertahankan Kotak komentar Default blog tentu akan membuat blog keliatan tidak dinamis karena terlalu memanjang ke bawah, nah oleh sebab itu saya akan memberikan Cara Membuat Komentar Facebook Berdampingan dengan Komentar Blog.

Berikut adalah Screenshot nya

Membuat Komentar Facebook Berdampingan dengan Komentar Blog

Bagaimana ingin mencoba Komentar berdampingan tersebut.
1. Login ke Blog
2. Rancangan – Edit HTML
3. Untuk menghindari keselahan, Backup template anda terlebih dahulu dengan Download lengkap
4. Centang “Expand Template Widget
5. Cari Kode <div class=’comments’ id=’comments’>
Biasanya akan terdapat 2 kode tersebut di template anda
Copy kode di bawah ini tepat di bawah kode <div class=’comments’ id=’comments’> yang ke 2

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

2 : Jumlah Komentar Facebook yang akan di tampilkan
400 : Lebar Komentar Facebook

6. Lalu Cari kode </head>
Copy Kode dibawah ini tepat diatas kode </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 Facebook 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>

ID Facebook : Ganti dengan ID Facebook anda yang terletak di bagian belakang browser URL Profil Facebook anda, Misalkan http://www.facebook.com/Blogdhika ID Facebooknya adalah Blogdhika

7. Cari kode /* Comment atau #comments
Setiap Template mempunyai struktur kode yang berbeda-beda, jadi cari saja kode yang mirip dengan kode diatas
Copy kode berikut di bawah kode diatas tadi

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

8. Simpan

Selesai, sekarang anda sudah mempunyai Komentar Facebook Berdampingan dengan Komentar Blog

97 Comments

  1. @Eka Saputra : Setelah saya cek template akang silahkan pasang kode diatas tepat di bawah kode
    #comments h4 {
    color: #666666;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.4em;
    margin: 1em 0;
    }

    Silahkan di coba
    text-transform: none;

  2. sy pke kok malah gambar diatas blog saya,, slidenya malah ngga berfungsi ya,,, itu knp yak???
    dah sy hapus lagi,, "comment yg berdampingan" nya…

  3. sepp gan.. berhasil… ni blog khusus testing template saya incomee.blogspot.com.
    masukan saya: salah satu kode diatas di pasang di bawah "" yang ke 1 itu baru berhasil.
    btw. gimana memindahkan komentar facebook nya ke kanan??
    terima kasih..

  4. gan, ane mau nanya nih. kalo mau ganti warna font nya gimana ya ?? ๐Ÿ˜€ soalnya blog ane template nya warna item ๐Ÿ˜€ jadi gak keliatan tuh si komeng pesbuk nya . ๐Ÿ™‚

  5. Yang gak bisa atau gak ngefek.. coba perhatikan langkah NO.5
    Pada kode : <div class='comments' id='comments'>

    Di atas dijelaskan menaruh kodenya di <div class='comments' id='comments'> yang Kedua (2), Tapi bagi yang gak bisa coba taruh kodenya dibawah <div class='comments' id='comments'> yang pertama (1).

    Semoga membantu.

  6. @ALL : ada yg berhasil, dan ada yang gagal dalam memasang script diatas …
    Hal tersebut didasari karena setiap template tidak semuanya memiliki struktur kode yg sama ….
    Jadi saran saya, jangan menyerah untuk mencoba !!!

  7. maksh ya mas , ..jossss.. bisa mas dipasang, tetapi dilaka artikel belum ada yangkoment di kotak koment blog kok kontak coment fbyna ga keliahta ya ????? apaklah nda bisa diperlihatkan semua walau belum ada yang komentar ????? coba mas cek blog sya…biar bisa dibandingkan ….http://prudentialyogyakarta1.blogspot.com

    maksih ya mas…. saya tunggu jawabnanya….

  8. MENABUNGLAH SEJAK DINI…..
    Sangat disarankan untuk masa depan anda…..
    tapi gimana kalau penghasilan pas pasan sehingga hanya sedikit uang yang bisa ditabung namun ingin memiliki tabungan dalam jumlah yang besar…….??????
    INI SOLUSINYA….!!!!!!!!!!!!!!!

    http://indoboclub.com/?ref=nandian

    Cukup dengan modal awal 100 ribu untuk upgrade pertama kali dan uang anda anda berkembang di jaringan IBC….
    CARANYA:
    # buka link >> http://indoboclub.com/?ref=nandian
    # klik REGISTER NOW, pastikan upline a.n >> nandian>>
    # isi data ACCOUNT INFORMATION dan PERSONAL INFORMATION
    # klik JOIN NOW
    # SELAMAT….!!!!!! anda telah bergabung dengan IBC

    * lakukan upgrade paket iklan untuk buat status akun menjadi ACTIVE
    * Iklankan URL anda melalui Facebook, Twitter, Email, dll untuk mencari downline dan dapatkan bonus referral hingga 10 level……

    Plan INVESTASI,
    Profit 2% /hari (senin-jumat, selama 100 hari)
    – Investasi Tanpa Auto Compound selama 100 hari
    โ—• $10.00 = $20.00
    โ—• $20.00 = $40.00
    โ—• $30.00 = $60.00
    dst… sampai dengan…
    โ—• $5000.00 = $10165.00

    – Investasi Menggunakan Auto Compound (AC) selama 100 hari*
    โ—• $10.00 di AC akan jadi $62.45
    โ—• $20.00 di AC akan jadi $124.89
    โ—• $30.00 di AC akan jadi $187.34
    dst… sampai dengan…
    โ—• $5000.00 di AC akan jadi $32579.13

    โ˜… Suport Bank : PM (Perfect Money), Bank MANDIRI, BNI, BCA, BRI, & Bank Daerah lainnya
    โ˜… Uang yang kita investasikan akan dipakai untuk Bisnis FOREX, ADVERTISING, DLL.

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*