Arief Hilman Nugraha

kali ini saya akan Mengshare Cara Memasang Kotak Komentar Facebook pada Setiap Postingan Blog  Mungkin tutorial ini cukup sulit untuk dipahami dan dimengerti. Karena saya telah 2x gagal dalam pemasangan Gadget keren ini, dan sebelumnya saya telah membuat sebuah artikel yang memiliki tema yang sama yaitu Cara Memasang Kotak Komentar Facebook pada Setiap Postingan Blog

Ok kali ini saya akan memberikan Tutorial yang cukup keren dan sedikit menantang
Alangkah baiknya sebelum kita mulai, anda download dulu template anda (agar resiko tidak terlalu tinggi - Merusak Template)

</head>

3. Setelah itu letakan kode dibawah ini tepat diatas kode yang tadi

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='http://www.facebook.com/pro770?ref=tn_tnmn' 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>
<span style="font-size: 30%">Get This!<a href="http://www.ariefhunterz.com/2013/01/cara-membuat-kotak-komentar-facebook.html" target="_blank" rel="follow">Tutorial Blogger</a></span> 

• Ganti kode yang saya coret dengan alamat profil Facebook Anda

4.  Lalu cari

]]></b:skin>

5. Letakan kode dibawah ini tepat diatas kode yang tadi\

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

6. Simpan template anda terlebih dahulu
7. Setelah itu cari kode

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

8. Pastekan kode dibawah ini tepat dibawah kode yang tadi

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

• Kode bewarna merah adalah lebar dari kotak komentar

• Kebanyakan blog akan memiliki 2 kode <div class='comments' id='comments'>. Jika anda adalah salah satunya, maka letakan kode no 8 dibawah ke-2 kode tersebut
• Jika Kotak komentar belum muncul, maka hapus kode <div class='comments' id='comments'> yang ke-2. Contoh