Sebelum membuat yang harus diingat yaitu, jika pernah menggunakan Plugins Fb Comment yang lama, dan ingin mengganti dengan ini, maka semua comment yang lama akan hilang, tapi ini hanya berlaku untuk Plugins fb coment, sementara untuk comment blog akan tetap ada. oke langsung saja ke TKP,
Langkah langkah Membuat Kotak Komentar Facebook dan Blog Berdampingan :
2. Pilih Layout/Tata Letak ► Edit HTML
3. Saya sarankan untuk membackup template anda dengan mengklik Download Full Template untuk berjaga jaga jika terjadi kesalahan.
4. Centang kotak yang bertuliskanExpand Widget Template.
5. Setelah itu cari code <div class='comments' id='comments'> gunakan ctrl + F untuk mempermudah pencarian.
<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='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' 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 == "item"'>
<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'>
Dan hasilnya akan Seperti ini :
<div class='comments' id='comments'>Note :witdh='400' sesuaikanlah dengan Lebar Halaman Artikel Blog masing-masing
<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='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' 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 == "item"'>
<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. Sekarang cari lagi Code </head>
8. Jika sudah ketemu silahkan Letakkan Code Berikut Tepat di Atas code </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 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>
Dan hasilnya akan seperti ini :
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>Note : Ganti ID FB Sobat disini dengan ID Facebook Masing-masing, Cara Melihat Id Facebook tinggal buka profil kamu terus lihat code di belakangnya, bisa berupa angka atau tulisan, atau nama, contohnya seperti berikut : https://www.facebook.com/bayurifai.tk
<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>
</head>
Nama atau Angka dibelakang Alamat Fb sobat, itulah Id Nya.
9. Sekarang Cari Lagi Code ini /* Comment atau #comments
Sesuaikan dengan yang ada di Blog, jika tidak Ketemu juga silahkan Cari Code yang mirip dengan code diatas.
Lalu Letakkan Code Berikut tepat di Bawah nya
.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;}
10. Sekarang Silahkan Klik Pratinjau dulu untuk melihat sudah benar atau belum, Jika sudah benar dan tidak ada masalah Silahkan Klik SIMPAN.