Banyak di antara blog-blog yang kita temui di online searching tidak memberikan Facebook Coment, padahal ada dia antara beberapa orang ingin memberikan atau berkomnetar dengan menggunakan facebook, sayang kan jika komntar itu tidak bisa mereka sampaikan,,,,karena pada dasarnya komentar-komntar itu akan banyak memperkenalkan Blog kepda pengunjung lain,
Kesempatan kali ini iJelusa akan memberikan cara membuat Facebook Coment pada blog di postingan, Yang hasilnya nanti seperti ini :
Berikut Caranya :
Berikut Caranya :
- Login ke account blogger kalian.
- Klik rancangan lalu klik: Edit HTML.
- Backup dulu template anda untuk berjaga-jaga jika nanti terjadi kesalahan ataupun error.
- Beri centang kotak kecil yang bertuliskan: Expand Template Widget.
- Jika sudah, cari kode ]]></b:skin> (klik pada html edit & gunakan ctrl + f untuk mempermudah pencarian).
- Kalau sudah ketemu maka masukkan kode berikut ini 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;}
#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;}
Hilangkan kode berwarna Red / Merah bila ingin background kedua komentar transparan.
Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments. (pakai cara ini jika cara yang diatas gagal, tapi kebanyakan dengan cara diatas berhasil. tenang saja!)
- Kemudian Sobat cari kode </head>
- Jika sudah ketemu, masukkan kode berikut ini tepat 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='ID FB kalian disini' 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 src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID FB kalian disini' 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>
Perhatikan tulisan yang berwarna Red / Merah di atas, ganti dengan ID facebook kalian, misalkan https://www.facebook.com/nama kalian maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika belum merubah ID Kalian maka yang tertera adalah berupa angka. Contohnya seperti ini: https://www.facebook.com/1234567890
- Kemudian cari kode <div class='comments' id='comments'>
<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'>
<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'>
Perhatikan: Pada penempatan kode yang ke dua, silahkan hapus kode yang berwarna biru! yang <div class='comments comments-page' id='blogger-comments-page'> apabila kode di bawahnya sama.
Perhatikan angka yang berwarna merah dan hijau di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Kalian dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template agar kelihatan rapi. kekurangannya tidak ada pemberitahuan pada saat ada yang berkomentar di Kotak Komentar Facebook,, tapi pada Komentar Blogger tetep ada pemberiatuannya kok! Nyantai saja,, Kalau ingin tampilan Blog kalian bagus kenapa harus takut memasang. Oke?
Kemudian klik save template, dan lihat hasilnya.
Apabila masih ragu, silahkan tuliskan dikotak komentar dibawah ini! semoga Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog bermanfaat untuk anda semua.
){kind=link}
0 Comments