Memasang Komentar Facebook Dan Blog Berdampingan

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.