January 11, 2013
Mungkin tutorial ini cukup sulit untuk dipahami dan dimengerti. Karena saya telah 2x gagal dalam pemasangan Gadget keren ini, dan sebelumnya saya telah membuat sebuah artikel yang memiliki tema yang sama yaitu Cara Memasang Kotak Komentar Facebook pada Setiap Postingan Blog
Ok kali ini saya akan memberikan Tutorial yang cukup keren dan sedikit menantang
Alangkah baiknya sebelum kita mulai, anda download dulu template anda (agar resiko tidak terlalu tinggi - Merusak Template)
Mungkin tutorial ini cukup sulit untuk dipahami dan dimengerti. Karena saya telah 2x gagal dalam pemasangan Gadget keren ini, dan sebelumnya saya telah membuat sebuah artikel yang memiliki tema yang sama yaitu Cara Memasang Kotak Komentar Facebook pada Setiap Postingan Blog
Ok kali ini saya akan memberikan Tutorial yang cukup keren dan sedikit menantang
Alangkah baiknya sebelum kita mulai, anda download dulu template anda (agar resiko tidak terlalu tinggi - Merusak Template)
7. Setelah itu cari kode
Ok kali ini saya akan memberikan Tutorial yang cukup keren dan sedikit menantang
Alangkah baiknya sebelum kita mulai, anda download dulu template anda (agar resiko tidak terlalu tinggi - Merusak Template)
Gambar 1.1 Mengunduh template
Mari kita mulai
1. Masuk ke Dashboard ~> Blog Sobat ~> Template ~> Edit HTML ~> Lanjutkan ~> Centang Expand Template Widget
2. Cari kode dibawah ini (Gunakan CTRL+F atau F3 Untuk mempercepat pencarian)
</head>3. Setelah itu letakan kode dibawah ini tepat diatas kode yang tadi
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='http://www.facebook.com/Andreanocalvin?ref=tn_tnmn' 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: 30%">Get This!<a href="http://tutorialseo-blog.blogspot.com/2012/10/cara-membuat-kotak-komentar-facebook.html" target="_blank" rel="follow">Tutorial Blogger</a></span>
- Ganti kode yang saya coret dengan alamat profil Facebook Anda
]]></b:skin>5. Letakan kode dibawah ini tepat diatas kode yang tadi\
.comments-page { background-color: #f2f2f2;}6. Simpan template anda terlebih dahulu
#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. Setelah itu cari kode
<div class='comments' id='comments'>8. Pastekan kode dibawah ini tepat dibawah kode yang tadi
<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='6' width='650'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
- Kode bewarna merah adalah lebar dari kotak komentar
TAMBAHAN
- Kebanyakan blog akan memiliki 2 kode <div class='comments' id='comments'>. Jika anda adalah salah satunya, maka letakan kode no 8 dibawah ke-2 kode tersebut
- Jika Kotak komentar belum muncul, maka hapus kode <div class='comments' id='comments'> yang ke-2. 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'>
bagus bangat \m/
ReplyDelete