cara menambahkan komentar facebook di setiap postingan

Ada beberapa langkah yang bisa kita lakukan untuk menambahkan plugins komentar menggunakan akun facebook kita di postingan blogger, sebagian dari cara-cara tersebut malah membuat blog kita jadi tidak enak dipandang sebab posisinya tidak proporsional. Misalnya, kolom komentar plugins facebook tersebut berada di bawah kolom komentar blogger, praktis jadi ada 2 kolom komentar kosong yang terlihat di bawah postingan kita. Kasus seperti sebetulnya karena penempatan HTML nya saja yang kurang pas.

Dibawah ini langkah-langkah membuat plugins komentar facebook yang menurut saya relatif karena tampilannya berada tepat berderet dengan tombol postingan blogger, sehingga komentator bisa memilih mau komentar pakai akun yang mana, tanpa tampilan pilihannya tumpang tindih.

 bagaimana cara menambahkan???
simak penjelasan berikut :

• pertama code CSS

 sekarang masuklah ke blogger dashbor kemudian pilih TEMPLETE dan EDIT HTML kemudian cari kode berikut:

]]></b:skin>

kemudian copy code dibawah ini,letakkan tepat diatas kode tersebut

 /* komentar facebook */
.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;}

jika sudah,kita ke tahap berikutnya

• kedua code HTML 

sekarang carilah kode berikut

  <div class='comments' id='comments'>

 Biasanya terdapat lebih dari satu kode di atas pada template blogger, jika kamu ingin agar plugins komentar facebook itu tampil di setiap postingan, silahkan simpan kode HTML di bawah ini tepat di bawah kode-kode tersebut.

<!-- HMTL komentar facebook start -->
<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='4' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<!--HTML komentar facebook end -->

catatan:

 ganti width='500' sesuai selera yang kamu inginkan

• ketiga code JAVA SCRIPT 

sekarang cari code  </head> kemudian letakkan code dibawah ini tepat diatas code tersebut

 <!--script komentar facebook start -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='kode id facebook kamu' 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>
<!--script komentar facebook end -->

masukkan code ID facebook kamu di tulisan berwarna merah kemudian save

lihat hasilnya  !!!

apakah memuaskan ?

silahkan tinggakkan pesan/komentar jika ada yang mengganjal