6
Komentar facebook dan blog berdampingan? maksudnya seperti apa? Nah, biar teman teman ga bingung, bisa melihat contohnya pada gambar di bawah ini

Komentar Facebook dan Blogger yang Berdampingan
Nah, sudah tau kan maksudnya seperti apa? pada kotak komentar model ini, akan terdapat dua tab menu yang masing masing berisi kotak komentar dengan facebook dan kotak komentar default dari blogger. tertarik untuk membuatnya?


1. Masuk ke Edit HTML, kemudian beri centang pada expand widget template. Oh ya, jangan lupa di back up dulu templatenya yah .

2. Cari kode berikut <div class='comments' id='comments'>
3. Kode berikut di bawah kode di atas

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>
<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'>

4. Cari kode </head> kemudian pastekan kode berikut di atasnya

<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' 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>

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;}

Keterangan :
  • Ganti kode warna biru denga jumlah coment yang ingin di tampilkan dan berapa ukuran lebar yang diinginkan
  • Ganti kode warna merah dengan id facebook teman teman, contoh alamat fb saya https://www.facebook.com/aziscs1 nah, id nya adalah aziscs1

Sumber : http://www.diditrinjano.com/

Post a Comment

  1. wow...informasi yang menarik. patut dicoba, thx for sharing

    ReplyDelete
  2. Sorry gan, ternyata ane telat ngasih tutornya,,

    ReplyDelete
  3. THANKS gan langsunganevobadan........ berhasil
    kunjungi juga http://newsnesia.blogspot.com

    ReplyDelete
  4. Wah...aku jadi kayak nemu emas disini...thanks mas dah saya uji coba, tapi bingung caranya setting moderasi komentar FB, gmana caranya ya?

    ReplyDelete

 
Top