Memasang Komentar Facebook dan Blogger Responsive

Memasang Komentar Facebook dan Blogger Responsive

Snippet Tips Blogger

Arlina

9/15/2014

Komentar Facebook dan Blogger Berdampingan merupakan dua hal yang sangat berhubungan karena seperti kita ketahui bahwa pada komentar blogger biasanya Admin hanya menyodorkan kolom komentar bawaan blogger dan sebagian pengunjung mungkin tidak memiliki akun gmail melainkan facebook.

Jadi yang perlu kita lakukan disini meletakkan juga kolom komentar facebook berdampingan dengan komentar blogger agar pengunjung yang tidak memiliki gmail bisa berkomentar menggunakan akun facebook mereka. Kode responsive komentar facebook digabungkan dengan tutorial dari blog Arlina Code pada artikel Cara Memasang Komentar Facebook Responsive di Blogger

Cara Memasang Komentar Facebook dan Blogger Responsive Berdampingan

1. Login ke blog > Buka Template > Salin kode di bawah ini sebelum ]]></b:skin> atau </style>

/* Komentar Facebook dan Blogger */
.komentargabungan-page,.komentargabungan-tab{display:inline-block;background:#fafafa;color:#fff;float:left;margin:0 10px 0 0;cursor:pointer;font-weight:bold;position:relative;font-size:110%;z-index:10}
.komentargabungan-page{background:rgba(255,255,255,1);width:100%;max-width:100%;margin:0 0 20px}
#blogger-comments-page h4{display:none}
#blogger-comments-page p{color:#444;}
#blogger-comments-page {padding:0px 5px;display:none;}
.komentargabungan-tab{background:#3b5998;padding:12px;transition:all .3s;}
.komentargabungan-tab:nth-child(2) {background:#fda753;transition:all .3s;}
.komentargabungan-tab:hover:nth-child(2) {background:#e1954a;}
.komentargabungan-tab-icon {height:14px;width:auto;margin:0 3px}
.komentargabungan-tab:hover{background-color:#324c82;}
.inactive-select-tab {background:#aaa}
.inactive-select-tab,.komentargabungan-tab:hover {background-color:#324c82;}

2. Kemudian salin kode di bawah ini sebelum </body>

<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize",function(){var o=location.protocol+"//"+location.host+location.pathname,t=$("#container-commentfb").width();$("#container-commentfb").html('<div class="fb-comments" data-href="'+o+'" width="'+t+'" data-num-posts="10"></div>'),FB.XFBML.parse()});
//]]>
</script>

3. Biasanya di dalam template terdapat dua kode <div class='comments' id='comments'>, salin kode di bawah ini tepat di bawah kedua kode <div class='comments' id='comments'>

<div class='komentargabungan-tab' id='fb-comments' onclick='javascript: commentToggle(&quot;#fb-comments&quot;);' title='Add Comments via Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar Facebook</div>
<div class='komentargabungan-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Add Comments via Blogger'>
<data:post.numComments/> Komentar Blogger</div>
<div class='clear'/>
</div>
<div class='komentargabungan-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='650'/></div>
</b:if></div>
<div class='comments komentargabungan-page' id='blogger-comments-page'>
<script src='https://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script type='text/javascript'>
function commentToggle(selectTab) {$(&quot;.komentargabungan-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.komentargabungan-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}
</script>

4. Simpan template dan lihat hasilnya di blog.

Sekian tutorial Cara Memasang Komentar Facebook dan Blogger Responsive di Blog, semoga dengan tutorial di atas berhasil diterapkan pada blog. Terima kasih.

Arlina