Cara Memasang Komentar Facebook Dan Blogger Berdampingan
Okelah sekarang kita akan bahas Cara Memasangnya ke blog sobat,
1. Seperti biasa sobat masuk ke akun blogger sobat masing-masing.
2. Pada tab menu sobat klick Rancangan ➨ Edit HTML ➨ Expand Template Widget.
3. Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.
4. Sekarang di dalam Edti Template sobat cari kode ]]></b:skin>
5. Jika sudah ketemu, copy kode di bawah ini dan paste atau letakkan di atas kode tadi.
NB: Jika sobat ingin back ground keduanya transparent maka sobat cukup hilangkan kode warna biru.
6. Sekarang sobat cari kode </head> lalu copy kode berikut dan paste atau letakkan di atasnya.
NB: Perhatikan teks warna merah, ganti teks tersebut dengan ID Aplikasi Facebook sobat, untuk membuat aplikasinya udah pada tau semua dong!
7. Masih di dalam Edit HTML, sekarang sobat cari kode <div class='comments' id='comments'> Lalu copy kode berikut dan paste atau letakkan di bawahnya.
NB: Biasanya kode <div class='comments' id='comments'> ada dua jadi sobat pilih kode yang kedua, ok!
NB:
8. Save.
Sekarang sobat bisa lihat hasilnya di komentar blog sobat.
Okelah sekarang kita akan bahas Cara Memasangnya ke blog sobat,
1. Seperti biasa sobat masuk ke akun blogger sobat masing-masing.
2. Pada tab menu sobat klick Rancangan ➨ Edit HTML ➨ Expand Template Widget.
3. Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.
4. Sekarang di dalam Edti Template sobat cari kode ]]></b:skin>
5. Jika sudah ketemu, copy kode di bawah ini dan paste atau letakkan di atas kode tadi.
.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;}
#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;}
NB: Jika sobat ingin back ground keduanya transparent maka sobat cukup hilangkan kode warna biru.
6. Sekarang sobat cari kode </head> lalu copy kode berikut dan paste atau letakkan 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='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>
<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>
NB: Perhatikan teks warna merah, ganti teks tersebut dengan ID Aplikasi Facebook sobat, untuk membuat aplikasinya udah pada tau semua dong!
7. Masih di dalam Edit HTML, sekarang sobat cari kode <div class='comments' id='comments'> Lalu copy kode berikut dan paste atau letakkan di bawahnya.
NB: Biasanya kode <div class='comments' id='comments'> ada dua jadi sobat pilih kode yang kedua, ok!
<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='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<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='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
NB:
- Hapus kode warna ungu jika di bawah template sobat atau di bawahnya terdapat kode yang sama.
- Perhatikan kode warna biru: angka 2 (dua) adalah jumlah komentar yang akan di tampilkan di komentar facebook, sobat bisa merubahnya. Angka 400 (empat ratus) adalah lebar kotak komentar facebook, sobat dapat merubahnya sesuai template sobat.
8. Save.
Sekarang sobat bisa lihat hasilnya di komentar blog sobat.
Sekian dulu untuk postingan atau articles Memasang Komentar Facebook Dan Blogger Berdampingan, semoga postingan atau articles ini dapat bermanfaat untuk sobat semua.