How To Make Comments Box Side by Side With Facebook Comments Box

How To Make Comments Box Side by Side With Facebook Comments Box - Meet again with me, here, in this place, but in the future maybe. to continue the previous tutorials, this time I will explain how to create a blog comment box side by side with facebook comment box.

WARNING: This is only intended for beginners like me who still do not know anything about the blog,.

How To Make Comments Box Side by Side With Facebook Comments Box

Add Facebook Comment Box to your blogger

Enable Facebook Comment Box to your blogger

Display Facebook Comment Box in your blog

If you think is good, please be demonstrated, here's how :

-  login to your blogger

-  then go to Template -> edit html

-  search code ]]></b:skin>, if difficulty use Ctrl + F to search it

-  paste this code above ]]></b:skin>

 .comments-page { background-color: #;}    #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;}

-  then find code </head>

-  paste this code above </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>    <script src='http://code.jquery.com/jquery-latest.js'/>    <meta content='ID facebook' 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>

Exp : change ID facebook with your Facebook ID, Exemple my Facebook profil url http://www.facebook.com/andrew.imamuddyen it means my Facebook id is andrew.imamuddyen

-  find code  <div class='comments' id='comments'>

-  paste this code below <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &quot;item&quot;'>

    <div id='fb-root'/>

    <fb:comments expr:href='data:post.url' num_posts='5' width='615'/>

    </b:if>

  </div>

<div class='comments comments-page' id='blogger-comments-page'>

-  finally click save and done

its very easy, just copy paste and done,. if you dont understand please comment and I will help you if I can., Ok, Thanks for visit..    ^_^