Cara Membuat Komentar Facebook dan blogger dengan model tab

Membuat komentar facebook dan komentar blog dengan model tab. Pada artikel yang lalu saya sudah membuat cara memasang komentar facebook pada bloger namun dengan style yang berbeda.  Nah kali ini akan saya akan membahas membuat komentar facebook yang berdampingan dengan komentar blogger dengan model atau style tab. Seperti yang saya gunakan pada blog ini. Penggunaan model tab ini biasa digunakan pada sidebar blog seperti pada tampilan tab label, artikel populer dan archive.

Cara membuatnya hampir sama cara membuat kotak komentar facebook yang saya bahas dulu. Pertama-tama masuk keakun blogger pilih template dan klik edit html. Cari code html berikut dengan menggunakan CTRL + F

<div class='comments' id='comments'>

Lalu copy code dibawah ini dan tempatkan tepat dibawah code html diatas

<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='550'/></b:if></div> <div class='comments comments-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='IDFANPAGEFACEBOOK' 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> <style>.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;}</style>

Jika sobat mempunyai fan page facebook cari kata IDFANPAGEFACEBOOK pada code diatas dan ganti dengan id fan page facebook anda.

Save template dan refresh blog anda. Jika komentar facebook belum muncul coba cari kembali tag <div class='comments' id='comments'> dan tempatkan lagi code komentar facebook dibawah tag tersebut. Karena pada saat saya memasang komentar facebook dengan model tab ini saya menemukan dua tag html tersebut dan kedua-duanya saya tempatkan code komentar facebook.

 

Sumber : http://freezon88.blogspot.com/2013/12/komentar-facebook-dan-blog-model-tab.html#more

Selamat mencoba