Como colocar comentários do Facebook e Blogger lado a lado no seu Blog

Veja como colocar lado a lado o sistema de comentários do blogger e do facebook no seu blog.

Leia também:

Em algumas ocasiões os usuários do seu blog farão algum comentário. Pode ser que alguns deles não tenham conta gmail, mas sim conta do Facebook. 

Existe uma forma de colocar o comentários do Blogger lado a lado com o sistema de comentários do Facebook. Veja como abaixo:

Como postar comentários responsivos no Facebook e Blogger lado a lado:

1. Faça login no blog > Abrir modelo > Copie o código abaixo e cole antes de ]]></b:skin >

.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. Em seguida, copie o código abaixo e cole antes de antes </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. Geralmente no modelo existem dois códigos: <div class='comments' id='comments'>. Copie o código abaixo e cole abaixo de todos os códigos que seja <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. Salve o modelo e veja os resultados no blog.

Pronto, Agora você sabe como colocar comentários do Facebook e Blogger lado a lado no seu Blog