Cara Membuat Kotak Komentar Facebook di Blogger

Pasti kamu pernah tau kolom komentar facebook yang ada di blog,seperti di blog saya ini.
kolom komentar facebook di pasang di blog memberi manfaat tersendiri , antara lain :
- Jika ada pengunjung menulis komentar di blog , maka secara otomatis pengunjung   membagikan / mengshare blog kamu ke kronologi seorang pengunjung tersebut.
- menurut survei saya , sebagain besar pengunjung blog tidak memiliki akun blogger , malah mereka mempunyai akun facebook , hal ini akan memudahkan pengunjung untuk memberikan tanggapan di blog kamu


Langkah - Langkah "Cara Membuat Kotak Komentar Facebook di Blogger"

1.Login Ke blogger kamu
2.Klik "Template" pada sisi Kiri

3.Tekan CTRL+F Lalu Cari Kode :
    ]]></b:skin>



    kemudian Taruh Script Berwarna biru  :

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

  di atas  ]]></b:skin> 


4. Tekan CTRL+F -> Cari Kode </head>

Masukkan Script dibawah ini , 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='IDfacebook' 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>


"IDFacebook" ganti dengan Link Url Facebook mu

contoh link url facebook saya : 

https://www.facebook.com/MenteriSosialRepublikIndonesia



5.Kemudian Cari lagi kode <div class='comments' id='comments'>

biasanya ketemu 2 kode , copy semua aja ^^

copy script di bawah ini , di atas 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='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'> 

5     = banyaknya komentar yang di tampilkan
450 = lebar kotak komentar 


contoh gambar : 


 
 6.Jika sudah mengikuti langkah di atas , Klik "Simpan Template"


Berikut adalah hasil Tutorial di atas : 


Tab Menu ? : #blogger \\ #pc \\ #umum \\ #smartphone \\ #desain \\