2 Membuat komentar facebook dan blog berdampingan

Salam blogging boxarif . kali ini saya akan berbagi cara Membuat komentar facebook dan blog berdampingan. Dengan kotak komentar di blog yang berdampingan ini maka pengunjung dapat memilih untuk berkomentar dari akun facebook atau dari akun blognya. Mari kita bahas tutorial cara membuat komentar di blog ini.

1. Login
2. Buka template dan edit HTML
3. Centang "Expand Widget Templates"
4. Cari ]]></b:skin>  (ctrl+f untuk pencarian)
5. Masukan kode berikut diatas ]]></b:skin>

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

6. Masukan kode berikut diatas </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><span style="font-size: 50%">Widget edited by <a href="http://super-bee.blogspot.com/" target="_blank" rel="follow">super-bee</a></span>

 Ganti ID Facebook diatas dengan ID facebook anda. 

Kita lanjutkan cara membuat komentar di blog ini.

7. Cari kode <div class='comments' id='comments'> umumnya ada 2 kode.
8. Letakan kode berikut di bawah kode keduanya <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='3' width='450'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

- Ganti kode yang berwarna biru sesuai dengan keinginan anda.
- Apabila setelah meletakkan kode dibawahnya <div class='comments' id='comments'> yang kedua, 

jika kode ini <div class='comments comments-page' id='blogger-comments-page'> ada yang sama, maka hapus saja kode yang merah ini.

9. Simpan template anda dan lihat hasil dari  Membuat komentar facebook dan blog berdampingan.

Komentar →