Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog

Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog-Ketika pertama kali membuat blog dan mencoba mencari info tetang blog, baik itu cara modifikasi tampilan blog sampai mencari cara agar blog yang kita bangun bisa terkenal.

Seiring berjalannya waktu saya membuka postingan beberapa blog orang lain, ketika ingin memberikan komentar pada postingan tesebut menemuan tamilan yang berbeda ari yang biasanya yang membuat saya ingin menari tahu dan memasangkan pada kotak komentar blog saya.

Baca Juga: Cara Membuat Foto Sampul Facebook Keren (Timeline)

Pada akhirnya saya menemukan tutorial Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog, siapa tau buat kalian ada yang ingin memasang kotak komentar facebook berdampingan bersama kotak komentar bawaan blogger sendiri.

Baca juga artikel menarik lainnya:

Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog
Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog

Lngkah Membuat Kotak Komentar Facebook Berdampingan di Blog:

  • Hal pertama yang harus Anda lakukan adalah loggin ke akun blogger Anda
  • Pada dashboard pilih “Template
  • Pilih “Edit HTML”
  • Sebelum memulai ke tahap selanjutnya silahkan download terlebih dahulu tempalate anda untuk berjaga-jagan dari hal yang tidak diinginkan.
  • Jika sudah, cari kode ]]></b:skin>(gunakan CTRL+F untuk mempercepat pencrian)
  • Setelah ketemu,masukkan kodedibawah ini diatas 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; backgroundcolor: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { backgroundcolor: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

Keterangan:

Silahkan hapus kode warna merah diatas jika ingin warna backgroun kedua terlihat transparan.

  • Cari lagi kode </head>, selanjutya copy kode dibawah ini tepat 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 kalian 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>

Keterangan:

Kode yang saya beri warna merah silahkan ganti dengan ID facebook kalian, misal: https://www.facebook.com/kudil.kadil. Maka ID facebook Anda berada pada tulisan warna merah.

  • Cari lagi kode <div class=’comments’ id=’comments’> lalu copy dan paste kode dibawah ini tepat dibwah kode <div class=’comments’ id=’comments’> (Keterangan: Pada umumnya kode <div class=’comments’ id=’comments’> ada 2, copy dan pastekan kode tersebut dibawah ke 2 kode tersebut).

   <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: Pada penempatan kode yang ke dua, silahkan hapus kode yang berwarna merah! yang <div class=’comments comments-page’ id=’blogger-comments-page’> apabila kode di bawahnya sama.

Pada kode yang ditandai warna hijau silahkan ganti sesuai yang Anda inginkan. Nilai tersebut adalah jumlah komentar yang akan ditampilkan.

Untuk kode yang diberi warna biru adalah lebar kolom komentar, silahkan ganti sesuai lebar template Anda. Usahakan sesuai lebar template Anda agar tampilan kolom koentar Anda telihat lebih rapih dan enak dipandang. Baca Juga: Cara Mudah Membuat Fans Page Show/Hiden Di Blog

Jika semuanya sudah diikuti langkah diatas, jangan lupa klik save/simpan, langkah selanjutnya silahkan cek hasilnya apakan kolom komentarnya sudah terpasanga, jika belum silahkan cek kembali apakah Anda sudah benar mengikuti langkah diatas.Jika masihbingung silahkan kirimkan pertanyaan Anda pada kolom koentardibawah ini.

Belajar lengkap blogger untuk pemula klik disini

Loading...
One Comment

Add a Comment

Your email address will not be published. Required fields are marked *

More in Blogger, Facebook
Cara Forwarded Email Pada Gmail

Cara Forwarded Email Pada Gmail-Di jaman serba modern seperti sekarang...

Close