Salam Blogger untuk para sahabat semuanya, Dalam tutorial atau postingan atau apa aja deh sobat mau menyebutnya apa, Intinya dalam postingan kali ini Blog O.W alias Oto Website akan update postingan dan ingin berbagi kepada sobat semua tentang Memasang Komentar Facebook Dan Blog Berdampingan, sobat pernah gak ngelihat blog yang kotak komentarnya ada dua dan berdampingan seperti kotak komentar facebook dan blog? kalo pernah hal itulah yang akan blog O.W alias Oto Website bahas kali ini!
Kalo belum pernah lihat sobat bisa lihat contoh gambar berikut ini:
Contoh Komentar Facebook Dan Blog Berdampingan
Nah udah paham kan? kalo belum paham, pahami dulu aja, kalo udah baru lanjut, xixixixi
Okelah sekarang kita akan bahas Cara Memasangnya ke blog sobat, Cekidot!

1. Seperti biasa sobat masuk ke akun blogger sobat masing-masing.

2. Pada tab menu sobat klick Rancangan ➨ Edit HTML ➨ Expand Template Widget.

3. Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Sekarang di dalam Edti Template sobat cari kode ]]></b:skin> Jika kesulitan mencarinya coba sobat baca Cara Cepat Mencari Kode HTML.

5. Jika sudah ketemu, copy kode di bawah ini dan paste atau letakkan di atas kode 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;}

NB: Jika sobat ingin back ground keduanya transparent maka sobat cukup hilangkan kode warna biru.

6. Sekarang sobat cari kode </head> lalu copy kode berikut dan paste atau letakkan di atasnya.

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

NB: Perhatikan teks warna merah, ganti teks tersebut dengan ID Aplikasi Facebook sobat, untuk membuat aplikasinya udah pada tau semua dong!

7. Masih di dalam Edit HTML, sekarang sobat cari kode <div class='comments' id='comments'> Lalu copy kode berikut dan paste atau letakkan di bawahnya.
NB: Biasanya kode <div class='comments' id='comments'> ada dua jadi sobat pilih kode yang kedua, ok!

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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'>

NB:
  • Hapus kode warna ungu jika di bawah template sobat atau di bawahnya terdapat kode yang sama.
  • Perhatikan kode warna biru: angka 2 (dua) adalah jumlah komentar yang akan di tampilkan di komentar facebook, sobat bisa merubahnya. Angka 400 (empat ratus) adalah lebar kotak komentar facebook, sobat dapat merubahnya sesuai template sobat.

8. Save.

Sekarang sobat bisa lihat hasilnya di komentar blog sobat.

Sekian dulu untuk postingan atau articles Memasang Komentar Facebook Dan Blog Berdampingan, semoga postingan atau articles ini dapat bermanfaat untuk sobat semua.

Bagaiman apakah sobat berhasil menerapkannya ke blog sobat? silahkan tinggalkan tanggapan atau komentar sobat tentang postingan atau articles di atas.

Posting Komentar Blogger Disqus

  1. @RazorItu adalah Id aplikasi facebook.
    syngnya sya tidk membhasnya krna sudh ktingglan, dn bnyak blog lain yg sudh membhasnya.

    untuk membuatnya Anda bisa cari d search engine dengan kata pcrian : CARA MEMBUAT APLIKASI FACEBOK.

    BalasHapus
  2. kenapa slideshow ku jadi gak bergerak setelah dipasang komentar

    BalasHapus
  3. berhasil sih gan, tapi kok icon blogger dan facebook nya ukuran nya berbeda gan ? icon blogger lebih besar dari facebook. terus gan, icon blogger nya malah kebawah, nggak berdampingan sama fb. salah nya dimana ya ? karena penampilan nya seperti itu, saya hapus lagi gan. bisa dibantu nggak ?

    BalasHapus
  4. @De'VikoAnda hapus kode jqury berikut pada script di atas
    <script src='http://code.jquery.com/jquery-latest.js'/>

    BalasHapus
  5. @Dunia PengetahuanCoba Anda ulangi lagi perintah di atas!

    Untuk merubah ukuran icon blogger dan facebook Anda cukup ganti url berikut:
    http://www.blogger.com/img/icon_logo32.gif
    http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png

    Mungkin pada template Anda sudah tertanam jquery ini, coba Anda hapus jquery berikut:
    <script src='http://code.jquery.com/jquery-latest.js'/>

    Masih Ada masalah???silahkan lemparkan pertanyaan Anda kembali!:Q

    BalasHapus
  6. BERHASIL Gann.......


    Tapi kok setiap ada yang komentar di facebook

    kok ga ada ya pemberitahuan nya .....

    pencerahan'a donk sob :D

    BalasHapus
  7. warna komentar facebook di blog gue gelap bro ..tau cara ganti warnanya ga? tolong share yah.. makasih
    .oiya untuk temen" lainnya jgn lupa buat join juga di www.suksesjaringan.blogspot.com untuk menemukan lebih banyak lagi rahasia :)

    BalasHapus
  8. @Christian YohanesSori RuLes, Perhatikan perintah pada tahap 5 gan!

    BalasHapus
  9. @Abu Bakar BarusSori Rules, memang tidak ada pemberitahuan gan.
    Untuk mengecek komentar yang masuk kita harus mengeceknya secara manual.
    Caranya:
    Login ke akun fb agan.
    Lalu Pada addres bar tempelkan kode/url berikut

    http://developers.facebook.com/tools/comments/?id=FACEBOOK_ID&view=queue

    Ganti teks tebal dengan ID APPS fb Anda.
    Lalu tekan Enter.

    BalasHapus
  10. komentarnya ga berfungsi .... kalaupun bisa ga nampil di facebook,

    BalasHapus
  11. thnks gan atas infonya ya,,,langsung dicoba ni,,,

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top