Membuat Komentar Blogger dan Komentar Facebook Sejajar

Cara Membuat Komentar Blog dan Facebook Berdampingan - Dengan tersedianya 2 buah kotak komentar di blog yaitu kotak komentar blogger dan kotak komentar facebook, akan memudahkan pengunjung untuk berkomentar dengan memilih salah satu dari form komentar tersebut. Untuk anda yang ingin memasang komentar facebook dan akan diletakkan disamping komentar default blogger, simak caranya dibawah ini.

Cara Membuat Komentar Facebook Dan Blogger Berdampingan :
1. Login ke blogger
2. Pada dasbor, plih Templates => Edit HTML
3. Tekan Ctrl+F, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

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

4. Cari kode </head> lalu letakkan kode berikut diatasnya

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

Keterangan :
Silahkan ganti ID profil facebook dengan ID facebook anda, contoh : https://www.facebook.com/nama anda

5. Cari kode <div class='comments' id='comments'> dan letakkan kode berikut dibawahnya

<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='5' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Keterangan :
- Angka 5 adalah jumlah komentar facebook
- Angka 600 adalah lebar kotak komentar facebook

Catatan :
Apabila pada template ada 2 kode <div class='comments' id='comments'> maka copy kode diatas pada ke 2 kode tersebut

Apabila pada template ada 2 kode <div class='comments comments-page' id='blogger-comments-page'> silahkan dihapus kode yang satu (jangan dihapus semua).

6. Simpan template

Silahkan dicoba.

tutorial blog

Terlintas

Membuat Komentar Blogger dan Komentar Facebook Sejajar

Related Posts

Entri Populer