10 Desember 2011

Cara Membuat Komentar Facebook dan Blog Berdampingan

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/mr.rinkido nah, id nya adalah mr.rinkido
6. Save dan lihat hasilnya

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Cara Membuat Komentar Facebook dan Blog Berdampingan

6 Komentar:

  1. nie keren gang,,tapi bisa nggak klw yang ditampilkan pertama kali adalah koment blognya??

    BalasHapus
  2. Gan, kalo untuk setting moderasi FB gimana caranya...mohon bantuannya, atau dibalas ke wikibagus@gmail.com

    BalasHapus
  3. nanya gan saya sudah berhasil pasang ikut tutor ini, tapi kok coment untuk blogger nya ngga active. mohon di cek ke tkp
    dan mohon bantuan lebih lanjut ke radirachim@ymail.com

    BalasHapus
  4. Kira kira untuk notifikasi facebook nya gima gan, gimana caranya agar ketika ada koment facebook kita bisa tau..?

    BalasHapus
  5. terimakasih mas ganteng, tutorialnya work di bloh saya :)

    BalasHapus

Terimakasih telah meninggalkan Komentar di Didit Blog | Silahkan berkomentar dengan bebas, tidak mengandung SARA | komentar dengan link HIDUP akan dihapus | Terimakasih ^_^