Kalau sering sobat jalan-jalan ke blog yang sudah pro, sudah tidak asing lagi melihat form komentar ada 2, yaitu form komentar untuk blog dan facebook. Form ini di buat sengaja untuk mempermudahkan mereka yang ingin komentar tetapi tidak mempunyai ID yang lain selain Facebook. yoo..weess, langsung aja kita ke TKP sob..
 |
Ikuti langkah-langkah berikut :
1. Masuk ke Edit HTML, kemudian beri centang pada "expand widget template" biar lebih aman back up dulu templatenya sob....2. Cari kode berikut <div class='comments' id='comments'>
3. Copy paste tag berikut di bawah <div class='comments' id='comments'> (kalau ada 2 tag tersebut, pilih yang paling bawah)
---------------------------------------------------------
<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'>
-----------------------------------------------------------
Ket :
- 2 (warna merah) adalah jumlah postingan FB yang di tampilkan
- 400 (warna biru) adalah lebar dari form komentar (silahkan edit sesuaikan dengan blog sobat)
------------------------------------- ------
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Masukkan ID Facebook anda' 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>
-----------------------------------------------
Ket:
- warna merah adalah ID facebook sobat. Cara melihatnya adalah, silahkan login ke FB sobat, masuk ke profil, kemudian lihat url di atas. (contoh www.facebook.com/bla.bla....). Nah...tulisan sesudah garis miring ( / ) adalah ID sobat. Didalam contoh berarti ID nya adalah bla.bla....
Tag berikut, di sebagian template tidak suport, dan kadang-kadang bikin hang kode yang lain, seperti slide show yang tidak jalan, related post, jadi tidak berfungsi, atau yang lainnya
Seandainya hal tersebut terjadi pada template sobat, caranya adalah :
Copy paste kode tersebut di bawah tag <body>
5. Kemudian cari kode berikut /* Comment atau #comments. Kemudian letakkan kode berikut di bawahnya.
---------------------------------------------------- ------------------------------------------
.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;}-----------------------------------------------------------------------------------------------
Sekian tutorial, mudah-mudahan bermanfaat....
2 komentar:
thanks bro informasinya, ane googling blog ini yg paling atas terlacak google.
mudah-mudahan bermanfaat gan...
Posting Komentar
terima kasih komentarnya, Komentar yang mengarah ke tindakan spam akan di hapus atau terjaring secara otomatis oleh spam filter