membuat kotak komentar facebook berdampingan dengan kotak komentar blogger

membuat kotak komentar facebook berdampingan dengan kotak komentar blogger

ARTIKEL TERKAIT:

Jika ingin kotak komentar blog kamu berdampingan dengan kotak komentar facebook, kamu tinggal modifikasi saja pada template blog kamu.
Berikut tutorial cara membuat kotak komentar facebook berdampingan dengan kotak komentar blogger,


Silahkan ikuti langkah -langkah bertikut :
1. Login ke blogger kamu.
2. Klik Template
3. KLik Edit HTML.
4. Download Template Lengkap (back-up Template)  terlebih dahulu agar template aman, bila terjadi kesalahan tinggal di ulang kembali.
5. Cari kode <div class='comments' id='comments'>
6. Lalu copy-paste kode berikut tepat dibawah kode <div class='comments' id='comments'>

Keterangan:
Apabila terdapat 2 kode yang sama <div class='comments' id='comments'> pastekan kode dibawah ini di kode yang kedua.

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

6. Simpan Template dan lihat hasilnya.
 
Jangan lupa luangkan waktu untuk beri komentar ya..., Terima kasih.