Membuat Komentar Facebook Berdampingan Di Blog

Membuat Komentar Facebook Berdampingan Di Blog - Di internet saya sudah sering melihat berbagai cara untuk membuat komentar blog dengan facebook, namun jarang terlihat ada tutorial cara membuat Komentar Facebook Berdampingan Di Blog atau memang ada tutorial cara membuat Komentar Facebook Berdampingan Di Blog yang tidak terpantau oleh saya karena dunia maya itu luas.

Oleh karena itu pada kesempatan kali ini saya akan menuliskan sedikit cara untuk membuat Komentar Facebook Berdampingan Di Blog sebelumnya saya juga sudah membahas mengenai cara Memasang Emoticon YM pada Komentar Blog. Sebelum kita mulai anda bisa melihat contoh nya dulu di DEMO jika sudah mari kita mulai cara membuat Komentar Facebook Berdampingan Di Blog.

Pertama backup dulu template blog anda agar tidak terjadi hal hal yang tidak di inginkan. kemudian cari yang namanya <div class='comments' id='comments'> jika ada lebih dari satu pilih saja yang nomor urut dua kemudian tempatkan kode dibawah ini tepat dibawah <div class='comments' id='comments'> yang nomer dua

Klik show untuk membuka 

<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
</fb:comments-count></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
</data:post.numcomments></div>
<div class="clear">
</div>
<div class="comments-page" id="fb-comments-page">
<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>
<div id="fb-root">
<fb:comments expr:href="data:post.url" num_posts="2" width="400">
</fb:comments></div>
<div class="comments comments-page" id="blogger-comments-page">
</div>
</div>

Lalu cari lagi kode </head> jika sudah ketemu tempatkan kode dibawah ini tepat di atas nya

Klik show untuk membuka 

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='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>

Rubah ID Facebook dengan ID facebook yang berada dibelakan url profil facebook anda misalnya http://facebook.com/ad129 maka id facebook anda adalah ad129.
Kemudian agar terlihat lebih indah kita akan menambahkan sedikit css agar terlihat lebih indah. cari lagi code kode /* Comment atau #comments jika sudah ketemu tambahkan kode di bawah ini di atasnya :

Klik show untuk membuka 

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

jika sudah simpan template dan lihat hasilnya. Demikian sedikit tips dari thedexwan.net mengenai caramembuat Komentar Facebook Berdampingan Di Blog selamat mencoba semoga berhasil di terapkan pada template anda

Tweet

Subscribe via Email