Cara Membuat Komentar Facebook Dan Blog Berdampingan

Cara Membuat Komentar Facebook Dan Blog Berdampingan

salam terhangat para blogger,malam ini saya akan memberikan tips blog yang tak kalah menriknya,yang akan membuat blog anda menjadi berbeda alias different bahasa gaulnya coy,ok langsung aja ke pokok permasalahan.

disini saya sebagai author akan menjelaskan bagaimana cara menyatukan 

kotak komentar blog dan facebook supaya berdampingan

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>

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 kamu ingin background 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='ganti dengan nama fb kalian' 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>

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.

Biasanya kode <div class='comments' id='comments'> ada dua jadi kalian tinggal pilih kode yang kedua

<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 biru jika di bawah template kalian 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 kalian bisa lihat hasilnya di komentar blog kalian masing,tinggal kan komentar jika mempunyai maslah terhadap postingan ini
terimakasih

sumber:otowebsite.blogspot.com