Membuat Komentar Blogger dan Facebook Berdampingan

Dari judulnya saja mungkin terlintas dari pikiran kita bahwa antara Facebook dengan Blogger mempunyai "hubungan" yang sangat dekat hingga mau menaruh komentar saja harus berdampingan segala hehe. Namun bukan itu yang akan saya bahas, tetapi yang akan saya bahas adalah bagaimana cara membuat kotak komentar tersebut saling berdampingan. Jika kalian belum pernah melihat tampilannya seperti apa, bisa kalian lihat pada gambar diatas. Berikut Langkah-langkah untuk membuatnya :

1. Masuk Blogger.com

2. Klik Rancangan --> Edit HTML --> Centang Expand Template Widget dan Jangan lupa di backup terlebih dahulu template kamu.

3. Setelah itu kamu cari kode <div class='comments' id='comments'> kemudian kamu copas kode dibawah ini dan letakan kode yang sudah kamu copas tadi diatas kode <div class='comments' id='comments'>.

<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. Setelah itu kamu cari lagi kode </head> dan Copas kode dibawah ini, lalu letakan diatas kode </head> tadi.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Letakan Alamat URL Facebook Kamu/FB Fans Page Kamu disini' 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. Masih ada lagi nih sob, kamu cari lagi kode /*comment atau #comments lalu kamu copas kode dibawah ini dan letakan di bawah kode /*comment atau #comments tadi.

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

6. Simpan Template, Agak Panjang yah sob hehe.

NOTE : 

• Ganti kode berwarna biru num_posts='2' adalah jumlah komentar yang akan ditampilkan dan width='400' adalah ukuran lebar yang kamu inginkan. 
• Ganti kode berwarna biru meta content='Letakan Alamat URL Facebook Kamu/FB Fans Page Kamu disini'   dengan url FB kamu, misalnya hzndi's blog punya alamat url http://www.facebook.com/hzndi.

Selamat Mencoba :D

Postingan Terkait:

Posted in: Blogger,Comments