Membuat Komentar Blog dan FB Berdampingan
1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template
Widget
5. Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f
untuk mempermudah pencarian)
6. Kalau sudah dapat 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;}
7. Kemudian Anda cari kode </head>
8. Jika sudah dapat, masukkan kode berikut ini tepat diatas 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 Anda 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><span style="font-size: 50%">Widget edited by
<a href="http://super-bee.blogspot.com/" target="_blank"
rel="follow">super-bee</a></span>
Perhatikan tulisan yang berwarna merah di atas, ganti dengan
ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Anda
berada pada tulisan yang berwana biru. Namun jika Anda belum merubah ID Anda
maka yang tertera adalah berupa angka. Udah ngertikan ? jika sudah maka Akan
saya lanjut.
8. Kemudian cari kode <div class='comments' id='comments'>
Keterangan: Pada umumnya kode tersebut ada 2, copy dan pastekan kode
berikut ini dibawah kode
<div class='comments' id='comments'> yang pertama dan kedua.
<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'>
Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan
jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan
lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi
kalu boleh saya kasih saran, sesuaikanlah dengan lebar Tempelate Anda agar kelihatan rapi. Dan perhatikan pula kode yang
berwarna merah, jika penempatan kode dibawah <div class='comments'
id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu
kode tersebut.
contoh :
<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'>
<div class='comments comments-page'
id='blogger-comments-page'> ( hapus salah satu)
9. Kemudian klik save, dan lihat hasilnya.
Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini
Anda ikuti dengan benar, maka seharusnya Anda berhasil melakukannya. Karena
langkah diatas sudah saya lakukan dan berhasil seperti yang Anda lihat milik
saya. Namun jika Anda memiliki struktur template yang berbeda, Anda dapat
meletakkan kode pada poin no.8 dibawah kode <div class='comments'
id='comments'> yang kedua saja.
Langganan:
Postingan (Atom)