- Login ke account blogger Sobat
- Klik rancangan lalu klik Edit HTML
- Download template Sobat dulu untuk berjaga-jaga jika nanti terjadi kesalahan
- Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
- Jika sudah, cari kode ]]></b:skin> (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 hijau bila
ingin background kedua komentar transparan.
Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.
Cara di atas ini yang biasanya mewajibkan penempatan kode di bawah kode /* Comment atau #comments, Sebenarnya sama saja, mungkin para master terdahulu menyarankan begitu agar tampak lebih rapi.
- 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 Sobat 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 Sobat 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
hijau di atas, ganti dengan ID facebook Sobat, misalkan
https://www.facebook.com/nama Sobat maka
ID Sobat berada pada tulisan yang berwana biru.
Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka.
contohnya seperti ini: https://www.facebook.com/1234567890
- Kemudian cari kode <div class='comments' id='comments'>
Keterangan: Pada umumnya kode
tersebut ada 2, copy dan pastekan kode berikut ini di
bawah kedua 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'>
NB: Pada penempatan kode yang ke dua
Sobat hapus kode yang berwarna ungu
ya:<div class='comments comments-page'
id='blogger-comments-page'> apabila kode di bawahnya sama.
Perhatikan angka yang berwarna biru
dan hijau di atas, angka 2 merupakan
jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook.
Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran,
sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.
Pada cara di atas yang biasanya
menyarankan hanya menempatkan pada kode <div
class='comments' id='comments'> yang kedua saja, saat saya coba
pada template blog uji coba saya tidak berhasil, jadi harus menempatkan di
bawah kedua kode tersebut.
- Kemudian klik save, dan lihat hasilnya.
sy dah coba brkali2 tp g bsa..apa ada yg hrus d setting ato aplah d bgian lainx.???mhon bimbinganx..thank's
ReplyDeletesetahu saya gak ada settingan khusus mas...dengan mengikuti cara-cara di postingan di atas sudah sangat membantu...
Deletecoba kawan perhatikan hal2 berikut :
1. ID Facebook Sobat
buka profil FB sobat Lihat di addres browser sobat. Misal alamat Profil sobat http://www.facebook.com/dh02ne. kawan cukup memasang kata 'dh02ne' (tanpa tanda petik) sesuai dengan langkah no. 7 di atas.
2. pada langkah no. 8, pada penempatan kode warna ungu gak usah dihapus.. alias tempatkan semua kode seperti apa adanya.
semoga dapat membantu kawan n thanks atas kunjungannya...:)
Terimakasih banyak atas informasinya
ReplyDeleteBermanfaat informasi yang telah disampaikannya
ReplyDelete