Membuat Komentar Facebook dan Blogger Berdampingan

Hari ini saya akan mencoba sharing bagaimana cara menggabungkan komentar facebook dengan blogger, sebelumnya terimakasih buat sahabat-sahabat blogger karena ini saya pelajari dari beberapa sumber dengan hasil modifikasi sendiri sehingga blog saya sekarang memiliki kotak komentar berdampingan seperti yang terlihat dibawah posting saya ini. Dengan ilmu semampunya saya akan sedikit berbagi untuk sahabat semua.

Berikut cara-caranya :

1. Login ke akun blogger dan masuk ke Template/Rancangan, klik Edit HTML

2. Jangan Lupa Backup dulu template-nya agar mudah mengembalikan ke default apabila terjadi kesalahan

3. Cari kode ]]></b:skin>

4. Kemudian masukkan script dibawah ini tepat diatas kode ]]></b:skin>

Script :

.comments-page { background-color: #f2f2f2;} #blogger-comments-page { background:#940000: padding: 0px 5px; display: none;} .comments-tab { font:14px; text-transform:uppercase;color:#ffffff; float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #6a6a6a;} .comments-tab-icon { height: 21px; width: auto; margin-right: 3px;} .comments-tab:hover { background-color: #3a3a3a; color:#eee;text-shadow:none} .inactive-select-tab { background-color: #940000; color:#eee;text-shadow:none}

5. Cari kode </head> dan masukkan script dibawah ini tepat diatasnya

Script :

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<meta content='ID FB AGAN' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

Note : Ganti tulisan yang berwarna dengan ID facebook masing-masing

6. Kemudian carilah kode <div class='comments' id='comments'>

Hampir semua template memiliki 2 script <div class='comments' id='comments'>, jadi copy dan pastekan kode dibawah ini tepat dibawah kedua script tersebut.

Script :

 <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://i1328.photobucket.com/albums/w533/artpoe-studio/Us/facebook_zpsd567bf22.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://i1328.photobucket.com/albums/w533/artpoe-studio/Us/blogger_zps1dda2a99.png'/> <data:post.numComments/> Comments

    </div><div class='clear'/>

    </div>

    <div class='comments-page' id='fb-comments-page'>    

    <div id='fb-root'/>

    <fb:comments expr:href='data:post.url' num_posts='4' width='720'/>

    </div>

    <div class='comments comments-page' id='blogger-comments-page'>

Note :  Ganti tulisan yang berwarna sesuai jumlah comment dan lebar yang diinginkan

7. Save dan lihat hasilnya persis sama seperti comment box saya dibawah.

Apabila ada yang kurang dimengerti silahkan bertanya pada kotak komentar !!!

Subscribe to receive free email updates: