Adsense

Monday, 10 June 2013

Komentar di Blogger dengan Akun Facebook














Langsung saja, langkahnya sebagai berikut :

1. CSS
Masuk ke dashboard >> Edit Template >> Expand Template Widget,tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>
/* komentar facebook */
.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

2. HTML :
Cari kode:
<div class='comments' id='comments'>
Biasanya terdapat lebih dari satu kode di atas pada template blogger, jika anda ingin agar plugins komentar facebook itu tampil di setiap postingan, silahkan simpan kode HTML di bawah ini tepat di bawah kode-kode tersebut.
<!-- HMTL komentar facebook start -->
<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='4' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<!--HTML komentar facebook end -->
Note :
Nilai 500 di atas adalah lebar kolom komentar yang bisa sobat sesuaikan sendiri berdasarkan kebutuhan.

3. Javascript
Letakkan kode di bawah ini tepat di atas kode </head>
<!--script komentar facebook start -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='MASUKKAN ID FB SOBAT BLOGGER' 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>
<!--script komentar facebook end -->

Ganti tulisan MASUKKAN ID FB SOBAT BLOGGER dengan ID Facebook sobat, misalnya kalau saya ariskacompnet.

Preview terlebih dahulu lalu save. Sekarang Di bawah postingan blog sobat akan terdapat kolom untuk pengunjung berkomentar menggunakan menggunakan akun facebook mereka. Regards.

Reactions:
Comments
0 Comments

0 comments:

Post a Comment

Terima Kasih telah membaca Postingan ini, Jika Anda menginginkan agar Blog ini selalu menjadi Inspirasi buat Anda, sedikit saran dan masukan bisa di tulis di sini,