Cara Membuat Komentar Blog Bersebelahan Dengan Komentar Facebook

Cara Membuat Komentar Blog Bersebelahan Dengan Komentar Facebook - Selamat malam sobat blogger. Gimana kabarnya? pasti baik-baik saja kan. Oke, keli ini saya akan share artikel buat sobat tentang Cara Membuat Komentar Blog Bersebelahan Dengan Komentar Facebook. Sobat blogger mungkin bertanya-tanya apa maksud dari komentar blog bersebelahan dengan komentar facebook. Baik saya akan jelaskan. Maksudnya, ada dua tab komentar yang akan ditampilkan di blog sobat. Tab sebelah kiri komentar blog, sedangkan tab sebelah kanan adalah tab komentar facebook. Jadi, visitor / pengunjung blog sobat bisa memilih mau berkomentar via blog atau facebook. Kalau sobat bingung silahkan liat gambar dibawah ini.

Jika sobat blogger tertarik untuk memasangnya pada blog sobat, berikut saya akan kasih langkah-langkah dalam pembuatannya.

• Masuk ke akun blogger sobat.
• Pilih Template. (Backup dahulu template sobat untuk menghindari hal-hal yang tidak diinginkan).
• Jika sobat sudah backup template sobat silahkan pilih Edit HTML.
• Kemudian sobat cari kode <div class='comments' id='comments'> (untuk mempercepat pencarian silahkan tekan Ctrl+F di kotak Edit HTML)
• Jika sudah ketemu silahkan Copy kode dibawah ini.

<div class='commblogfb-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<img class='commblogfb-tab-icon' src='http://picturestack.com/782/578/wAVakauttaCJP.png'/>
<fb:comments-count expr:href='data:post.url'/> Komentar Facebook
</div>
<div class='commblogfb-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<img class='commblogfb-tab-icon' src='http://picturestack.com/782/260/56xakauttaZrS.png'/> <data:post.numComments/> Komentar Blogger
</div><div class='clear'/>
</div>
<div class='commblogfb-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='600px'/>
</b:if>
</div>
<div class='comments commblogfb-page' id='blogger-comments-page'>

<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 / FANSPAGE SOBAT' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.commblogfb-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.commblogfb-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script><style type='text/css'>.commblogfb-page, .commblogfb-tab {color:#3F3937;float:left;padding:5px;margin-right:5px;margin-left:5px;cursor:pointer;font-weight:bold;background-color:#f2f2f2;border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;position:relative;z-index:10;box-shadow:0 -1px 2px #666;-moz-box-shadow:0 -1px 2px #666;-webkit-box-shadow:0 -1px 2px #666;background-image:linear-gradient(#fff,#f2f2f2);background-image:-moz-linear-gradient(#fff,#f2f2f2);background-image:-webkit-linear-gradient(#fff,#f2f2f2)}.commblogfb-page {background:rgba(255,255,255,.4);margin-top:8px;}#blogger-comments-page {padding:0px 5px;display:none;}.commblogfb-tab {background-color:#6196DB;background-image:linear-gradient(#6196DB,#9FBFE9);background-image:-moz-linear-gradient(#6196DB,#9FBFE9);background-image:-webkit-linear-gradient(#6196DB,#9FBFE9)}.commblogfb-tab-icon {height:14px;width:auto;margin:0 3px}.commblogfb-tab:hover {background-color:#9FBFE9;background-image:linear-gradient(#9FBFE9,#9FBFE9);background-image:-moz-linear-gradient(#9FBFE9,#9FBFE9);background-image:-webkit-linear-gradient(#9FBFE9,#9FBFE9)}.inactive-select-tab {background:rgba(background-color:#e2e2e2;background-image:linear-gradient(#f4f4f4,#DDD);background-image:-moz-linear-gradient(#f4f4f4,#DDD);background-image:-webkit-linear-gradient(#f4f4f4,#DDD)}.inactive-select-tab, .commblogfb-tab:hover {background-color:#3b5998;background-image:linear-gradient(#6b89d8,#3b5998);background-image:-moz-linear-gradient(#6b89d8,#3b5998);background-image:-webkit-linear-gradient(#6b89d8,#3b5998)}</style>

• Kemudian Paste kode tersebut dibawah kode Kedua dari <div class='comments' id='comments'>. (pada template saya kode kedua adalah <a name='comments'/>. Saya Paste kode tersebut dibawah kode <a name='comments'/>.) Untuk lebih jelasnya silahkan sobat Lihat gambar dibawah ini :

• Kemudian ganti kode yang berwarna Biru dengan ID Facebook / Fanspage sobat.
• Kemudia Simpan Template dan sobat lihat hasilnya.

Jika sobat belun tau ID Facebook/Fanspage sobat, silahkan lihat disini :

caranya buka profil facebook sobat lalu lihat kode angka atau nama setelah http://facebook.com/. misalnya http://facebook.com/rozzbydayak.m.nandjan atau http://facebook.com/profile.php?id=100001413516012. yang saya beri warna Biru itulah ID facebook, silahkan sobat ganti dengan ID facebook sobat masing-masing

Sekian dulu info yang dapat saya sampaikan. Semoga artikel yang saya buat ini dapat berguna dan bermanfaat buat blogger semua. Jika sobat mengalami kesulitan, silahkan bertanya pada kolom komentar atau pada chatbox. Salam Blogger.

Ditulis Oleh : Unknown ~ Mari Berbagi

Sobat sedang membaca artikel tentang Cara Membuat Komentar Blog Bersebelahan Dengan Komentar Facebook. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://mari-berbagi244.blogspot.com/2013/04/cara-membuat-komentar-blog-bersebelahan.html" target="_blank">Cara Membuat Komentar Blog Bersebelahan Dengan Komentar Facebook</a>

Silahkan masukan Email sobat untuk mendapatkan update artikel terbaru di blog ini :

Delivered by FeedBurner