Cara Membuat Komentar Facebook Dan Blogger Berdampingan

Ku Share | Kali ini saya akan share tentang cara membuat komentar facebook dan blogger bersebelahan memang car ini sudah banyak di share oleh para blogger master tapi apa salahnya kita sebagai blogger newbie ikutan share juga komentar facebook memang sanggat di perlukan karna bukan hanya blogger saja yang ingin mengomentari tentang artikel kita tapi facebook, Twitter dan lain-lain. Oke berikut ini screenshotnya :

Berikut cara membuatnya :

Login akun blogger anda.
Pilih Template - Edit HTML(Jangan lupa centang Expand Widget Templates).
Lalu cari kode ]]></b:skin> setelah kode tersebut ketemu silahkan masukan kode berikut ini di atas kode ]]></b:skin>.

.comments-page { background-color: #fff;}
#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;}

Kemudian cari lagi kode </head> jika kode tersebut sudah diketemukan silahkan masukan kode di bawah ini di atas </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 Anda 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();
}

Note :
Tulisan berwarna biru silahkan anda ganti dengan ID Facebook anda contoh : www.facebook.com/encek.crew.

Kemudian cari lagi kode <div class='comments' id='comments'> jika kode tersebut terdapat 2 pastekan kode di bawha ini tepat di bawah <div class='comments' id='comments'> (2-2nya gan).

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://s-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='https://lh5.googleusercontent.com/--vu5gE3yh1E/UA333Ytm5hI/AAAAAAAAAnM/nbi9p0of21o/h120/favicon.ico'/> <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='4' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Note :
Angka 4 adalah jumlah komentar yang ingin di tampilkan.
Sedangkan angka 400 adalah lebar kolom kotak komentar tersebut silahkan anda sesuaikan dengan ukuran template sobat.