Cara Membuat Kotak Komentar Facebook Berdampingan dengan komentar Blogger
Diposting oleh
Abdul Rahman
| at 08.48
0
komentar
Labels :
Mempercantik Blog
Salam Blogger, Melengkapi permintaan salah satu sahabat yang meminta saya menjelaskan tentang cara memasang komentar facebook dan blogger berdampingan.
Mungkin tutorial ini sudah usang dan tidak asing lagi bagi Sobat semua, akan tetapi tutorial yang sudah ada saya coba tidak berhasil pada semua template, dan kemungkinan banyak berhasil pada template premium saja.
Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.
Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: Demonya Bisa anda lihat di blog saya ini,,
1.Login ke account blogger Sobat
2.Klik rancangan lalu klik Edit HTML
3.Download template Sobat 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 ketemu maka masukkan kode berikut ini 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;}
Kemudian Sobat cari kode </head>
Jika sudah ketemu, masukkan kode berikut 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 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>
Kemudian cari kode <div class='comments' id='comments'>
Keterangan: Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>
<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='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Disini saya sedikit mengulas lagi agar tutorial ini berhasil di semua template, karena pada saat saya coba pada blog uji coba saya yang bertemplate standar, tuorial yang lama tidak berhasil, hanya berhasil pada template premium saja, berikut cara yang saya dapatkan dari salah satu blog yang sudah lama bergelut di dunia blogger.
Cara Membuat Komentar Facebook dan blogger Berdampingan Pada semua template: Demonya Bisa anda lihat di blog saya ini,,
1.Login ke account blogger Sobat
2.Klik rancangan lalu klik Edit HTML
3.Download template Sobat 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 ketemu maka masukkan kode berikut ini di atas kode ]]></b:skin>
Kodenya Pertama :
#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;}
Keterangan : Hilangkan kode berwarna biru bila ingin background kedua komentar transparan
Kode Kedua :
Jika sudah ketemu, masukkan kode berikut ini tepat di atas kode </head>
<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>
Keterangan : Perhatikan tulisan yang berwarna merah di atas, ganti dengan ID facebook Sobat, misalkan https://www.facebook.com/nama Sobat maka ID Sobat berada pada tulisan yang berwana hijau. Namun jika Sobat belum merubah ID Sobat maka yang tertera adalah berupa angka. contohnya seperti ini: https://www.facebook.com/1234567890.Untuk lebih gampang gunakan saja ID nama Facebook sobat aja.
Kode Terakhir :
Keterangan: Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>
NB: Gunakan Kode <div class='comments' id='comments'> yang ke-2
<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='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Keterangan : Perhatikan angka & tulisa yang berwarna biru dan kuning di atas, angka 2 merupakan jumlah komentar yang akan ditampilkan pada komentar facebook atau tulisan yang sobat inginkan.Misalnya :Comments bisa anda ganti tulisan yg sobat inginkan. Sedangkan angka 500 merupakan lebar kotak komentar facebook. Sobat dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template Sobat agar kelihatan rapi.
Sedikit Tips: Kode Pertama & Terakhir sebaiknya di simpan satu persatu.
Semoga bermanfaat buat sobat,,
Choy Pau-Pau-Lipu Banggai Laut' orang yang haus akan ilmu pengetahuan yang bisa berguna bagi kehidupan diri sendiri maupun orang lain...Salam Hangat Dari Saya,jangan lupa kritik,saran serta komentar sobat semua tentang artikel dan blog saya.Terima Kasih.salam damai untuk sobat semua..:)
0 Komentar Sahabat
Langganan:
Posting Komentar (Atom)