Cara membuat Komentar Facebook bersebelahan dengan komentar Blogger

Dengan adanya Komentar facebook ini dapat membuat blog kita lebih enak karena jika menggunakan FB coment maka tidak perlu reload halaman cukup tekan enter muncul deh, Setiap kali ada pengunjung yang berkomentar nanti mereka bisa klik sesuai yang dipilih yaitu FB Comments atau Blogger Comments. Disamping penampilanya sangat bagus ada keuntungan juga karena setiap kali ada pengunjung yang komentar di kotak FB blog kalian maka secara otomatis url postingan kalian akan muncul dan dishare di FB. dan itu bagus untuk traffic Blog kalian XD.dan dilengkapi dengan jumlah yang berkomentar jadi kita bisa tau ada berapa banyak 


Berikut  Cara Membuat Kotak Komentar FB Bersebelahan dengan Kotak Komentar Blogger lengkap dengan jumlah yang berkomentar :
1. Masuk ke blogger dan pilih Template ----> edit HTML ----> Proceed----> 
    Centang Expand Widget Templates 
    (PERHATIAN: BACK UP DULU TEMPLATE ANDA)
2. Cari kode <div class='comments' id='comments'>   (Gunakan CTRL+F)
3. Copas kode berikut tepat dibawah kode <div class='comments' id='comments'>
    -Bila ada dua kode <div class='comments' id='comments'> Maka silahkan pilih yang 
     pertama, bila gagal pilih 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'>

4. Setelah pemasangan kode tersebut, lanjutkan dengan mencari kode</head>
5. Bila sudah ketemu maka copas kode berikut tepat diatas kode </head> 

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

Penting!!
- Ganti YOUR ID FB PROFILE dengan nomor ID FB kalian. Bila nggak tahu cara dapetin kodenya klik disini untuk caranya.

6. Sesudah itu lanjuntkan dengan memasang kode CSS berikut. Untuk memasangnya cari kode 
]]></b:skin>  dan letakkan kode berikut diatasnya.
Jika anda ingin Warna background komentarnya berwarna abu abu maka gunakan kode berikut

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

atau
Jika anda ingin Warna background komentarnya  Default maka gunakan kode berikut

.comments-page{background-color:#ffffff}#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:15px;width:auto;margin-right:3px}.comments-tab:hover{background-color:#eee}.inactive-select-tab{background-color:#d1d1d1 img height:15px}

Selesai dan selamat mencoba semoga berhasil