Cara Membuat Kolom Komentar Facebook dan Blogger Berdampingan Secara Responsive

Kamu tentu pernah berkunjung ke sebuah blog yang dimana ada komentar Facebook sama blogger berdampingan, terus bagaimana cara membuat nya? Pada kesempatan kali ini saya akan share bagaimana membuat komentar Facebook dan blogger secara responsive di blogger. 

Biasanya seseorang tidak memiliki akun gmail untuk berkomentar akan tetapi hanya meiliki akun Facebook, jadi tidak ada salahnya apabila ingin meletakkan komentar Facebook dengan komentar blogger, bagaimana caranya Berikut Cara Membuat Kolom Komentar Facebook dan Blogger Berdampingan Secara Responsive

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 dari saya apabila ingin kamu tanya langsung aja di kolom komentar yang ada di bawah ya sobat. 

Share :