Cara Membuat komentar facebook berdampingan dengan komentar blogger

kali ini Diaz akan melengkapi posting sebelumnya yaitu cara membuat komentar facebook di blog, kali ini saya lengkapi dengan membuat komentar dari blogger juga sobat. Maksud dari judul di atas adalah kotak komentar yang setelah posting akan ada dua pilihan, yang satu dari blogger dan yang satu lagi dari facebook. Jadi para pengunjung bisa memilih apakah mereka mau comment di kotak facebook atau di kotak yang disediakan blogger dan letak button nya juga berdampingan.

Lihat contoh screen shootnya pada gambar dibawah:

Berikut langkah-langkah membuat komentar facebook berdampingan dengan komentar blogger :

1. Login ke account blogger sobat

2. klik menu Template
3. lalu pilih Edit html

4. lalu sobat cari kode  ]]></b:skin> (tekan ctrl+f agar lebih mudah)

5. copy kode dibawah ini dan letakan di atas kode ]]></b:skin>

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

6. kemudian sobat cari lagi kode </head>
7. copy kode dibawah ini dan letakan di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <script src='http://code.jquery.com/jquery-latest.js'/> <meta content='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><span style="font-size: 50%">Widget edited by <a href="http://diaz-box.blogspot.com/" target="_blank" rel="follow">Diazbox™</a></span>

8.  Teks yang bertuliskan ID FB SOBAT DISINI ganti dengan alamat atau url
    profil facebook sobat.
    misal : http://www.facebook.com/agustine.diaz

9. yang terakhir cari kode  <div class='comments' id='comments'> hasil
    pencarian pasti ada 2 kode seperti ini, sobat copy kode di bawah ini dan
    letakan dibawah kode <div class='comments' id='comments'> yang ke 2.

<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'>

10. Teks merah yang bertuliskan 600 adalah lebar kotak komentar yang akan
     dibuat, bisa anda ganti dan sesuaikan.
 
11. kemudian Simpan template

Semoga artikel Diaz ini bisa bermanfaat untuk sobat-sobat blogger sekalian.Jika sobat mempunyai pertanyaan,kritik ataupun saran,silahkan tulis di kolom komentar yang berada di bawah postingan.Sampai jumpa di TUTORIAL BLOGSPOT  berikutnya.