Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Selamat pagi sobat Caritahu. Pagi ini Caritahu akan kembali berbagi tutorial blog.Seperti judul postingan di atas, tutorial kali ini mengenai Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan.
Berikut adalah tampilannya :

Cara Membuat Kotak Komentar Facebook di blog

Untuk tutorialnya, silahkan sobat ikuti langkah-langkah berikut ini :

Pertama, masuk ke menu Template - Edit Template dan cari kode  ]]></b:skin>. Kemudian copy kode di bawah ini tepat di atas 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: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}

Kedua, cari kode </head> kemudian tambahkan kode berikut di atas 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='https://www.facebook.com/atoinkuan' 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>

Sekarang yang harus sobat lakukan adalah mengganti tulisan berwarna merah tersebut dengan ID Facebook sobat sendiri.

Ketiga, cari kode <div class='comments' id='comments'>. Sobat akan menemukan dua kode yang sama, untuk itu silahkan copy paste  koe berikut ini tepat di bawah kedua kode
<div class='comments' id='comments'> :

<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='7' width='525'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

Keterangan : 7 adalah jumlah komentar yang tampil. sedangkan 525 adalah lebar kotak komentar.
Setelah itu langkah terakhir adalah Simpan Template adn silahkan sobat lihat perubahannya. Sekian tutorial ini, semoga bermanfaat.

                                                                        * * * * * * * *
Sumber kode : umstrieduatiga