Cara Menggabungkan Kotak Komentar FB Dengan Blogger

Akhir-akhir ini Qiqi jarang sekali membuat postingan baru karena kesibukan yang adat dan waktu yang terbatas. Nah sekarang mumpung Qiqi mempunyai waktu banyak, maka Qiqi akan berbagi ilmu kepada sobat blogger yang masih newbie terutama teman sekolah saya, hehehehe,,,,,,,,,,,.

Kali ini yang akan kita bahas adalah kotak komentar FB dengan blogger dapat berdampingan menjadi satau. Mungkin sobat blogger yang sudah mahir tidak asing lagi dengan tutorial ini, tapi karena demi mlengkapi tutorial blog koleksi maka saya posting kembali. Dari pada banyak bacot, kita langsung saja ke materi. Check it dot :

• log in dlu ke akun blogger sobat
• pilih template
• edit HMTL --> check list expand widget
• cari kode berikut <div class='comments' id='comments'>, copas tepat dibawah kode tersebut
• jika terdapat lebih dari 2 kode <div class='comments' id='comments'>, maka sobat blogger pilih kode <div class='comments' id='comments'> yang kedua

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

• jika sudah simpan template sobat dan lihat hasilnya.

semoga ilmu ini bermanfaat bagi kita semua, happy blogging,,,,,,,,,,,,,,,,,,,,,,,,
jangan lupa juga tinggalkan komentar, agar artikel yang saya posting lebih bermanfaat lagi bagi sobat blogger, kritik dan saran di tunggu,,,,,,,,

Bagi sobat blogger yang suka dengan tutorial ini, silahkan download filenya di sini :

Sumber http://tejahtc.blogspot.com/

Artikel Terkait :

Posted in: Blogger