Cara Menggabungkan Komentar Facebook dengan Komentar Blogger

Oleh Chairil Kaka

Tuesday 18 September 2012

Bagikan :

Tweet

Salam sukses paling tokcer visitor. mungkin sobat pernah melihat di sebagian blog yang menampilkan kontak komentar facebook berdampingan atau berdekatan dengan kontak komentar blogger?, dan sobat ingin juga memasangnya di blog sobat kan? kalau begitu jangan tunggu lagi terus ikutin tutorial berikut ini tentang bagai mana cara memasang komentar facebook berdampingan dengan komentar blogger. ok lansung ja ikuti tutorial berikut ini ingan jagan ada yang terlewatkan baca yang tiliti ya.

• masuk ke akun blogger anda.
• klik Template
• kemudian klik Edit HTML. jangan lupa centang expand template widget
• cari kode berikut dengan Ctrl+f : <div class='comments' id='comments'>  jika kode tersebut ada dua maka pilih kode yang kedua.
• kemudian copi paste kode dibawah ini tepat di bawah kode <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='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

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

•  Nb: ganti tulisn bewarna merah dengan ID facebook sobat contoh https://www.facebook.com/kakachairilg2
• selesai

semoga bermangfaat bagi rakan sekalian
jangan lupa like dan comennya..!