Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template

Selamat Siang Sahabat Blogger, Kali ini saya akan kembali mencoba membagikan Tutorial tentang Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template, sehingga para pengunjung blog dapat memilih, apakah mereka ingin berkomentar melalui komentar blog atau dengan komentar facebook.

Langsung saja sobat, mari kita mulai praktekkan tentang bagaimana Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template, sebagaimana tutorial berikut :

1. Login ke account blogger Anda
2. Klik rancangan lalu klik Edit HTML
3. Download template Anda dulu untuk berjaga-jaga jika nanti terjadi kesalahan
4. Beri centang atau ceklis pada kotak kecil yang bertuliskan Expand Template Widget
5. Jika sudah, cari kode ]]></b:skin> (gunakan ctrl + f untuk mempermudah pencarian)
6. Kalau sudah dapat maka masukkan kode berikut ini di atas kode ]]></b:skin>

Klik show untuk melihat

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

Anda bisa menyesuaikan kode warna biru untuk mengganti background kotak komentar.


     7. Kemudian Anda cari kode </head>

     8. Jika sudah dapat, masukkan kode berikut ini tepat diatas kode </head>

Klik show untuk melihat

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

Perhatikan tulisan yang berwarna biru di atas, ganti dengan ID facebook Anda, misalkan https://www.facebook.com/nama Anda maka ID Anda berada pada tulisan yang berwana biru. Namun jika Anda belum merubah ID Anda maka yang tertera adalah berupa angka, seperti contoh https://www.facebook.com/1234567890. Udah ngertikan ? jika sudah maka Akan saya lanjut.

JADINYA SEPERTI INI

     9. Kemudian cari kode  <div class='comments' id='comments'>

Keterangan:
Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode <div class='comments' id='comments'> yang pertama dan kedua.

Klik show untuk melihat

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

Perhatikan angka yang berwarna merah dan biru diatas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook. Sedangkan angka 400 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Anda agar kelihatan rapi.

Dan perhatikan pula kode yang berwarna hijau, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.

Perhatian : jika ingin merubah warna tulisan pada kolom komentar facebook anda bisa mengganti kode berikut : fb:comments expr:href='data:post.url' num_posts='2' width='400'/ dengan div class='fb-comments' data-colorscheme='dark' data-num-posts='2' data-width='400' expr:data-href='data:post.url'/.

   10. Kemudian klik save, dan lihat hasilnya.

Sumber : super-bee & Zuaz'Z Creator™

Ditulis Oleh : MATA KAKUL - Delapan Enam 86

Sobat sedang membaca artikel tentang Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href=" https://de86nam.blogspot.com/2012/08/cara-membuat-komentar-facebook-dan.html " target="_blank"> Cara Membuat Komentar Facebook dan Blogger Berdampingan Pada Semua Template </a>

:: Mata Kakul ::