Tips / Trik Cara Memasang Kotak Komentar Facebook di Setiap Posting Blogger
Setiap posting akan dapat memiliki komentar yang berbeda, sesuai dengan komentar yang akan diterbitkan, beda dengan widget komentar facebook yg akan memiliki komentar yang sama meski dalam posting yang berbeda.
Langkah dan Cara Memasang Kotak Komentar Facebook di Setiap Posting Blogger
1. Masuk ke akun blogger sobat lalu pilih Dashboard (gb.1), lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)
(1)
(2)
(3)
2.Setelah itu cari kode:
<div class='comments' id='comments'>untuk mempermudah pencarian tekan Ctlr + F pada keyboard kemudian sobat letakkan kode berikut tepat di BAWAH nya:
<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='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='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
3.Cari kode /* Comment atau #comments dan letakkan barisan kode css berikut ini tepat dibawahnya:
.comments-page { background-color: #f2f2f2;}
.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;}
}
4.Cari lagi kode </head> dan letakkan kode script berikut tepat di ATAS nya:
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ferry.ariyanto09' 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>
5.Simpan dan selesai :D
Ket:
Untuk Ferry.ariyanto09 ganti dengan id facebook sobat, bisa angka maupun nama. Ferry.ariyanto09 ini ane ambil dari nama id dari akun facebook ane seperti gambar berikut:
6.Semoga berhasil ya sobat bloggers :D
0 comments