Modifikasi Coment FB Berdampingan Dg Coment Bloger

Cara Membuat Kotak Komentar FB Disebelah Kotak Komentar Blogger lengkap dengan tombol buka dan penutup. Sangat bagus memang dengan menggunakan cara ini gan, disamping tanpilannya menjadi elegant, kita juga bisa menghemat tempat. Disana nanti pengunjung bisa memilih antara berkomentar dengan menggunakan kotak komentar FB atau dengan kotak komentar Blogger.

1. Masuk ke blogger dan pilih Template -> Edit HTML
2.Cari code </head> lalu copy code di bawah ini tepat di atas code </head>
3.Lalu ganti YOUR ID FB PROFIL Dg ID punya anda sendiri tentunya ID yang Valid.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR ID FB PROFILE' 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>

4.Cari kode <div class='comments' id='comments'>   Gunakan Ctrl + F
5.Bila ada dua <div class='comments' id='comments'> Maka pilih yang pertama dan jika gagal maka pilih yang urutan kedua.
6.Lalu copy dan vaste code di bawah ini tepat di bawah code <div class='comments' id='comments'> yang pertama atau 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'>

7.Sesudah itu lanjuntkan dengan memasang kode CSS berikut. Untuk memasangnya cari kode #comment atau .comment dan letakkan kode berikut dibawahnya atau diatasnya (terserah kalian).

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

8.Selanjutnya "SAVE tample" anda dan lihat hasilnya,Atau anda ingin menambahkan profile anda di atas tab komentar baca tutorialnya di sini,Selanjutnya..., Atau anda mau memodifikasi kotak komentar standar agar tampak lebih elegn baca tutorialyan di sini,Selanjutnya...


NB:Sesuaikan dengan tampilan blog sobat.tq

Advertisement