Cara DESAIN BLOG Menggabungkan Komentar Facebook & Komentar Blogger Di Blog

Cara Menggabungkan Komentar Facebook & Komentar Blogger Di Blog

Oke saya rasa tidak perlu panjang lebar, ayo di mulai...

Seperti biasa, langkah pertama yang harus kamu lakukan adalah masuk dahulu ke blogger.com menggunakan akun kamu, kemudian.

Ikutilah langkah-langkah di bawah ini :

Ingat : Sebelum kamu mengedit HTML, sebaiknya BACKUP dulu template blog kamu.

1. Klik Template.
2. Klik Edit HTML.
3. Pilih Format Template.
4. Cari Kode (agar lebih mudah mencari kode di kotak template kamu, gunakan tombol ctrl+f » tunggu sebentar » jika berhasil maka akan terlihat Di Dalam Kotak Template Kamu).

» Cari kode : <div class='comments' id='comments'> pada template saya ada dua kode tersebut dan saya pilih kode yang pertama.
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di bawahnya.

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

Keterangan :

• width='600'/> adalah ukuran lebar, silahkan kamu ganti dengan selera yang kamu mau.
• Untuk menambah efek scroll pada kolom komentar facebook, kamu bisa mengganti kode : <div class='comments-page' id='fb-comments-page'> dengan kode : <div class='comments-page' id='fb-comments-page' style='max-height:230px;overflow:auto;'>

» Cari kode : </head>

» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di atasnya.

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='http://www.facebook.com/enoparnoabiezz?fref=ts' 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 kamu ganti http://www.facebook.com/enoparnoabiezz?fref=ts dengan URL halaman facebook kamu sendiri.

» Cari kode : #comments atau kode : /* Comment
Bila tidak sama dengan kode diatas, kamu bisa sesuaikan dengan kode yang ada di template kamu. cari kode yang semirip mungkin.
» Setelah kode tersebut sudah ditemukan, silahkan pasang kode di bawah ini tepat di bawahnya.

.comments-page {}
#blogger-comments-page {display: none;}
.comments-tab {float:left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2; border-radius:4px;}
.comments-tab-icon { height: 16px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
<small><a href="http://enoparnoabiezz.blogspot.com/2012/11/cara-menggabungkan-komentar-facebook.html" target="_blank">Cara Menggabungkan Komentar Facebook & Komentar Blogger Di Blog</a></small>

5. Sebelum Kamu Klik Simpan Template, sebaiknya kamu klik Pratinjau Template terlebih dahulu untuk memeriksanya.
6. Jika Sudah Oke » Klik Simpan Template.

Catatan :

• Untuk melihat hasilnya : coba lihat artikel kamu yang sudah berisi komentar blogger, atau kamu bisa uji coba membuat komentar dengan akun blog dan akun facebook untuk melihat hasilnya.

Selamat Mencoba, Semoga Berhasil & Mudah-Mudahan Bermanfaat :)


BY : http://enoparnoabiezz.blogspot.com