Cara Menggabungkan Komentar Facebook dan Komentar Blogger

Bagi yang tertarik ingin mencobanya, silahkan dibaca, dan sangat berharap tutorial ini sedikit berguna,, simple saja jangan buu buru.. langsung saja mari kita Let's do it :
Masuk blogger - Pilih Template - Klik Edit HTML - cari Code Berikut Ini :

<div class='comments' id='comments'>
Apabila terdapat 2, maka pilih saja yang pertama. Kemudian Copy Code dibawah ini dan paste dibawah code diatas :
<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'>
 Catatan :
- width='400' dapat disesuaikan dengan lebar halaman artikel blog Anda.
- Untuk menambah efek scroll pada kolom komentar Anda bisa mengganti kode:
<div class="comments-page" id="fb-comments-page">
dengan kode: <div class="comments-page" id="fb-comments-page" style="max-height: 230px; overflow: auto;">
Tetapi jika tidak ingin menambah scroll, silahkan di abaikan saja.
Selanjutnya cari kode: </head> lalu letakkan kode dibawah ini tepat diatasnya.
<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' 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>
Note : Ganti  ID FB dengan ID facebook sobat.. contoh ID Fb https://www.facebook.com/ian.azhari.5 yang berwarna merah itu adalah ID sobat..
Kemudian cari Code Berikut /* Comment atau kode: #comments, kalau saya sendiri mempunyai banyak code #comments, bagi yang template-nya berbeda biasanya identik dengan comment bisa ID atau class.. okeh apabila sudah ketemu letakan code dibawah ini tepat dibawahnya :
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
 untuk mengantisipasi eror, karena tampilan blog sekarang berlaku untuk Cache jadi selama blog sobat belum ditutup jadi masih bisa di Undo : Ctrl+Z..
simpan dan pastikan tidak salah..
 


0 Komentar