Blog Stats

SEO Stats powered by MyPagerank.Net
Subscribe Us For More post

Tuesday

shourov

How to add a stupefy comment box in a blog


Hello everybody, How are you? This is an amazing post for adding a stupefy Multi-tab comment box in a blog. Lately, I see many of new bloggers can't add a comment box in their blog. Now, They search the matter in google or any search engine sites for the solution. But perhaps they don't find any good or manipulate articles and gets topsy turvy post which makes them very maze. So for this purpose i am going to share a stunt easy method for you. I hope by following this trick, You will get a great ease solution. Here i am writing  the  detail step by step. If it makes you unable to understand, don't be panic.  I will share all the process with images.
Firstly you will be needed a facebook app id. If you don't have yet, Then go to https://developers.facebook.com/apps and create an app id.
To add Facebook and blogger multi-tab comment box together, Please go to http://blogger.com and then you have to log in your account.

  1. After going to Dashboard, Go to --> Theme.



  2. Edit HTML.

   3. Then Search </head> by pressing(Ctrl+F)from your keyboard.

 4.Past the below codes on </head> tag,
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='Your_Facebook_App_ID' property='fb:app_id'/>
<script type='text/javascript'>
//<![CDATA[
function commentToggle(selectTab) {
 $(".comments-tab").addClass("inactive-select-tab");
 $(selectTab).removeClass("inactive-select-tab");
 $(".comments-page").hide();
 $(selectTab + "-page").show();
}
//]]>
</script>



 5. Again search this tag ']]></b:skin>' and past the below codes on this tag,
 .comments-page{background-color:#FFF;border:1px dotted #93DAF8;border-radius:10px;margin-top:5px}
#blogger-comments-page{padding:0 5px;display:none}
.comments-tab{float:left;padding:5px;margin-right:3px;cursor:pointer;background-color:#b5e5fa;border-radius:2px}
.comments-tab-icon{height:14px;width:auto;margin-right:3px}
.comments-tab:hover{background-color:#eeeeee}
.inactive-select-tab{background-color:#d1d1d1}




 



6.Then, again search this tag : <b:include data='post' name='post'/> by pressing Ctrl+F from your keyboard. And now past the below codes under <b:include data='post' name='post'/>  this tag,
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <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://1.bp.blogspot.com/-iVjviy2-71E/VSepyTP7WsI/AAAAAAAAD_w/3GTM7GGmQKQ/s1600/FB.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></b:if><div class='clear'/></div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='comments-page' id='fb-comments-page'>
   <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='10' width='100%'/>
  </div>
</b:if>
<div class='comments comments-page' id='blogger-comments-page'>




 7. Then Save Template And finally you did this.

If you find any trouble regarding on this, just let me know. And if you have any query, comment here. I will try to give my best solution to you. Thank you for reading this article. 


Share Article:

shourov

About shourov

He is a Blogger from Bangladesh. likes to write Technology stuffs...

Subscribe to this Blog via Email :