Membuat Kometar Facebook Di Blogspot

Secara ilmu SEO, ini akan memudahkan pengunjung yang tidak punya akun blogger akan bisa meninggalkan komentar tanpa menggunakan anonim,karena belum tentu semua blog membolehkan anonim untuk berkomentar di blog karena Anonim terkesan seakan-akan adalah (sensor)...hehehehehe.Komentar facebook dan blog yang berdampingan ini akan saya tambahi sedikit dengan modivikasi efek hover dan bayangan sehingga ketika disorot oleh mouse akan bergerak seperti di blog saya ini :).

Langsung saja yook kita ke KUA,biar ga  kelamaan nunggu.hehehe....Refreshing bentar lah,maksud saya ke Tutorial  Membuat Komentar Facebook Berjajar Dengan Komentar Blog.

1.Login ko Blogger
2.Pilih Opsi lainya>>Template>>(lebih baiknya backup dulu templatenya biar nanti kalo ada apa-aa ga nyesel)Edit HTML>>Lanjutkan(Centang"Expant Template Widget")
3.Cari kode ]]></b:skin>  kemudian jika sudah ketemu kopas kode dibawah ini tepat diatas kode ]]></b:skin>


.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: #b7b0b0;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-ms-transform:rotate(15deg);moz-box-shadow: 10px 5px 5px #222;
    -webkit-box-shadow: 10px 5px 4px #222;
    box-shadow: 10px 5px 5px #222; -moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
}



4.Setelah itu cari kode </head> kemudian kopas kode dibawah ini 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='ID Facebook' 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>

5.Langkah selanjutnya adalah mencari kode <div class='comments' id='comments'>Biasanya ada dua kode semacam itu.Letakkan saja kode dibawah ini tepat dibawah kode yang kedua tersebut.


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


Angka 2 menunjukkan komentar facebook yang ditampilkan sedangkan angka 400 adalah lebar dari komentar facebook.

5.Langkah yang terakhir adalah"save template"