4 Cara Membuat Dan Memasang Kolom/Kotak Komentar Facebook Di Blogger 2016

4 Cara Membuat Dan Memasang Kolom/Kotak Komentar Facebook Di Blogger 2016

4 Cara Membuat Kolom Komentar Facebook Di Blogger terbaru 2016
4 Cara Membuat Kolom Komentar Facebook Di Blogger 2016
4 Cara Membuat Kolom Komentar Facebook Di Blogger 2016 - facebook adalah salah satu social media yang sudah lama ngetren di kalangan social media, siapa sangka pada blog kamu juga bisa memasang kotak komentar layaknya seperti kotak komentar facebook pada umumnya. ya banyak cara untuk membuat kotak komentar ini salah satunya bisa memasangnya lewat developer facebook namun pemasangan lewat cara satu ini cukup ribet, nah ini adalah solusi terbaru untuk anda jika tidak ingin ambil pusing untuk membuat kotak komentar facebook

4 Cara Membuat Kolom Komentar Facebook Di Blogger 2016

4 Cara Membuat Kolom Komentar Facebook Di Blogger terbaru 2016
4 Cara Membuat Kolom Komentar Facebook Di Blogger 2016

1. Membuat Kotak Komentar Facebook pada template biasa

1. Login terlebih dahulu blogger kamu
2. Pilih menu template==>Edit Html
3. Pada Html silahkan anda cari code <div class='comments' id='comments'> Untuk mempercepat pencarian silahkan anda
Ctrl
+
F
klik pada keyboard anda
4.Pastekan code di bawah ini tepat di bawah code <div class='comments' id='comments'> yang tadi sudah anda cari
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FACEBOOK KAMU' 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>
<style>.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;}</style>
 5. Silahkan anda ganti Text: "ID FACEBOOK KAMU" dengan ID Facebook kamu, Jika sudah Lihat hasilnya


2. Cara Membuat Kotak Komentar Facebook Responsive Di Blog

Jika kamu sudah memasang template kamu dengan Responsive maka tutorial di Membuat Kotak Komentar Facebook di bawah ini sangat cocok untuk kamu gunakan,.. iya dengan kamu memasang kotak facebook Responsive pada template Responsive kamu, maka Responsive pada blog kamu akan menjadi lebih baik.
1. Masih Pada Mode Template==>Edit Html
Yang Harus kamu Lakukan Hanya Dengan Menambah Javascript di bawah ini
 <script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){
  var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();
    $('#container-commentfb').html('<div class="fb-comments" ' +
    'data-href="'+url+'"' +
    ' width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );
});
//]]>
</script>
 Jangan Lupa javascript di atas silahkan kamu simpan tepat pada kode </head>
Langkah selanjutnya kamu harus memasang kode Html di bawah ini tepat sesudah code <div class='comments' id='comments'> atau kamu juga bisa menambahkan Html ini tepat di bawah Code related post
<b:if cond="data:blog.pageType == &quot;item&quot;">
<h4>Post Comment</h4>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%'><fb:comments expr:href='data:post.url' num_posts='5' width='500'/></div>
</b:if>
 Nah jika sudah silahkan kamu save template kamu dan lihat hasilnya

3. Cara Membuat Kotak Komentar Facebook 2015

Untuk pemasangan Ini Anda hanya harus sedikit menambahkan Javascript dan kode Html
1.Masih Pada Edit Html
2. Silahkan anda cari code berikut <div class='comments' id='comments'> jika 2 kode yang sama silahkan anda coba memasang satu persatu
3. Salin kode di bawah ini tepat sebelum kode <div class='comments' id='comments'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:20px'>
<div class='fb-comments' data-num-posts='5' data-width='600' expr:data-href='data:blog.url'/>
</div>
</b:if>
Note 600 adalah lebar kotak komentar pada blog anda

4. Jika sudah selesai langkah berikutnya silahkan anda cari code <body>
5. Salin Kode Javascript berikut tepat di bawah kode <body>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
Jika sudah selesai bisa langsung anda simpan, dan lihat hasilnya

4. Cara Membuat Kotak Komentar Responsive Terbaru 2016

Nah Ini adalah cara terakhir dan terbaru untuk membuat kotak komentar facebook untuk memasang kotak komentar facebook ini cukuplah mudah. Oky langsung ajha ke cara pembuatannya Anda hanya harus menambahkan Javascript di bawah ini tepat pada kode <div class='comments' id='comments'> atau bisa juga pada kode <div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' num_posts='5'/></div>
</b:if>
 Nah terakhir save template kamu

bagai mana shobat blogger cukup mudah bukan, Wahhh memang mudah tapi tangan saya juga sudah mulai pegel ketik ini semua, tapi nggk apalah yang penting semua ini bisa bermangfaat untuk anda
Sampai ketemu lagi di Frequenzi yang sama
SELAMAT MENCOBA
  1. Facebook
  2. Komentar
  3. Tutorial Blog