Good Evening Sobat Blogger.. Kali ini, saya akan mengupdate artikel saya tentang blog. Yang akan saya berikan pada artikel kali ini adalah menambahkan widget komentaf facebook dibawah artikel blog.
Walaupun kemajuan teklonogi sudah semakin maju, tetapi masih banyak orang yang tidak memiliki web blog, jadi mereka akan kesulitan untuk memberi tanggapan pada artikel yang sobat buat.
Tetapi bandingkan dengan Facebook, siapa yang tidak mempunyainya, bahkan anak yang baru berumur 5 tahun sekarang sudah memiliki akun media sosial terpopuler saat ini.
Jadi dapat disimpulkan bahwa, sekarang ini banyak sekali orang yang sudah memiliki akun jejaring sosial buatan Mark Zuckerberg ini. Jadi jika pada blog sobat terpasang widget komentar facebook ini akan mempermudah pengunjung sobat yang tidak nmemiliki web blog.
Oke, berikut merupakan cara memasang widget komentar facebook dibawah artikel pada blog.
1. Sobat Login terlebih dahulu di blog sobat.
2. Setelah masuk pada blog sobat, selanjutnya sobat masuk ke menu Template
3. Kemudian, jika sobat sudah masuk pada Template, klik menu Edit HTML. Dan cari kode <div class='comments' id='comments'> ( untuk memudahkan pencarian, sobat bisa menekan tombol CTRL + F Untuk mencari.
4. Jika kodenya sudah di temukan, letakkan kode ini, tepat dibawah kode <div class='comments' id='comments'>
Walaupun kemajuan teklonogi sudah semakin maju, tetapi masih banyak orang yang tidak memiliki web blog, jadi mereka akan kesulitan untuk memberi tanggapan pada artikel yang sobat buat.
Tetapi bandingkan dengan Facebook, siapa yang tidak mempunyainya, bahkan anak yang baru berumur 5 tahun sekarang sudah memiliki akun media sosial terpopuler saat ini.
Jadi dapat disimpulkan bahwa, sekarang ini banyak sekali orang yang sudah memiliki akun jejaring sosial buatan Mark Zuckerberg ini. Jadi jika pada blog sobat terpasang widget komentar facebook ini akan mempermudah pengunjung sobat yang tidak nmemiliki web blog.
Oke, berikut merupakan cara memasang widget komentar facebook dibawah artikel pada blog.
1. Sobat Login terlebih dahulu di blog sobat.
2. Setelah masuk pada blog sobat, selanjutnya sobat masuk ke menu Template
3. Kemudian, jika sobat sudah masuk pada Template, klik menu Edit HTML. Dan cari kode <div class='comments' id='comments'> ( untuk memudahkan pencarian, sobat bisa menekan tombol CTRL + F Untuk mencari.
4. Jika kodenya sudah di temukan, letakkan kode ini, tepat dibawah 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'>
<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. Selanjutnya Simpan Template sobat, dan lihat hasilnya.
Demikian artikel sederhana ini saya buat, semoga bermanfaat. Maaf jika saya meletakkan kodenya agak berantakan, tetapi semoga sobat lihat dari bagaimana cara saya menyampaikan, bukan bagaimana tampilan saya menyampaikan. Terimakasih.
EmoticonEmoticon