Comments widget for blogger

 Comments widget for blogger and this is very convenient to use earlier than we tell you the approach of including comments widget to your blogger weblog we have to talk about the way that how does it work and how does it look. So right here is the screenshot of this widget which quite first-class and work in almost all type of blogger blogs. 

• This widget creates the new looks on your comment section.
• If the other comment section gets disturbed it works well for any kind of blog.
• Well if any new character came to your blog and choose to see that is this active weblog then he simply seem on the remark part blog and the new remarks on your blog seems on the left facet then the new consumer effortlessly understand that this is an active blog, so this is one of a proper way to stay your weblog appear active. 
• Blog look more beautiful than before.
• It will remain your blog active.

So now here are some steps to add this widget to your blogger blog.

There Are the Following Steps:-

Go to Blogger Dashboard

Click on Add a gadget on the page

Now a new window appears and clicks on HTML/Javascript after scrolling the box to down

Insert the below code into the field

<script style=text/javascript src="http://tutbig.blogspot.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href="https://plinksharing.blogspot.com/2013/04/blogger-comments.html" rel="nofollow">Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Replace your-blog-name with your blog URL. 

I hope you enjoy this post and the photos. Comment Box Widget for Blogger

Add Disqus Comment Box In Blogger

  Disqus tutorial today I will show you how to add an insert Disqus comment box to the Blogger blog with pictures. Disqus is the commenting widget gadget. Disqus allows the user to write whatever they want and it is free to add a Disqus widget to our website or blog easily, so here we add the Disqus comment box widget to blogger. Disqus allows anyone to comment either as a guest, Facebook, or other social media accounts. This will confirm its identification and all data will be saved in the Disqus portfolio but not in your account.

Step 1: First we open the Disqus site and click GET STARTED button.

Step 2: Now We Create a Disqus Account so We Signup Here.

Step 3: Here We Click I Want to Install Disqus on My Site Link.

Step 4: Here We Fill Website Name, Category Then Click Create Site Button.

Step 5: Now We Click Continue on Basic Button.

Step 6: Select Here Your Bog or Site Platform so Here I Am Select Blogger.

Step 7: Now We Click Add Blog-Name to My Blogger Site Button.

Step 8: In This Page, We Click Add Widget Blue Button.

Step 9: At Last Open Blogger Blog.

I hope you enjoy this post and the photos. Add Disqus Comment Box In Blogger

How to Add Stylish Customized Blogger Comment Box

 Today I will show you comment box is a great way to collect feedback from your customer or from your blog readers who provides you an easy to understand reports. Comment box allows your readers to give their honest and valuable opinion about your post, something that your readers can say and express. It also encourages your blog readers to participate actively with other readers of your blog.

So, let’s come to the main point for the reason you are here. Blogger comment box by default does not much catchy and seems dull.

If you need to customize your Blogger search bar. Here I have 15 best-customized blogger search bar.

That’s why I have this 3 best-customized comment box for your Blogger blog that you can implement into your blog as you choose or as per your blog theme color.

Just follow the simple steps and will get the best comment box for your Blogger blog. 

Watch the Video guide to understand better.

1. Sign in to your Blogger blog and select Theme

(Before you proceed to step 2, make sure that you take a backup of your current theme)

To back up your theme.

i) Go to Backup/Restore on the left-hand side and

ii)Click on Download theme.

Now, Let’s resume our comment again,

2. Select Edit HTML.

3. Find the code  ]]></b:skin>

and paste the below code above  ]]></b:skin>  code.

1. Customize Comment Box 

.comments .comment-block { background: #F9F9F9; color: #555; box-shadow: 0 4px 10px #EEEEEE; position: relative; margin-top: 10px; margin-left: 60px; padding: 10px; border: 4px solid #EEEEEE !important; border-radius:10px; font: 1.190em/1.2 Cambria,Georgia,sans-serif;} .comment-thread li .comment-block:before { position: absolute; display: block; left: -26px; color: #EEEEEE; content: "\25C4"; font-size: 30px;} .comments .avatar-image-container { width: 60px; height: 60px; max-height: 60px; margin:0px 0px 0 -28px; padding: 0px; border: 7px solid #EEEEEE; border-radius:60px;} .comments .avatar-image-container img { overflow:hidden; width: 60px; height: 60px; max-width: 60px; border:0 !important; border-radius:60px;} .comments .comment-thread.inline-thread { background: none;} .comments .continue { border-top: 0px solid transparent;} .comments .comments-content .datetime { float: right; font-size: 11px;} .comments .comments-content .user a{ font-size: 15px; color: #498EC9;} .comments .comments-content .datetime a:hover{ color: #777; text-decoration: none;} .comments .comments-content .comment:first-child { padding-top: 0px;} .comments .comments-content .comment { margin-bottom: 0px; padding-bottom: 0px;} .comments .continue a { padding: 0px;} .comments .comments-content .icon.blog-author { background-image: none;}  

2. Customize Comment Box 

.comments h4
  {
  color:#ffffff;
  display: inline-block !important;
  background:#3BB7D9;
  padding:10px;
  }
  .comments .comment .comment-actions a {
  background:#3BB7D9;
  border-radius: 5px;
  color: #ffffff;
  font:12px georgia;
  margin-right: 8px;
  padding:5px;
  text-decoration: none !important;
  }
  .comments .comment-block {
  background:#f8f8f8;
  border: 1px solid #f0f0f0;
  padding: 10px;
  }
  .continue
  {
  border-top:none !important;
  }     .continue a {
  background:#3BB7D9;
  border: 1px solid #3BB7D9;
  border-radius:5px;
  color: #ffffff;
  display: inline-block !important;
  margin-top: 8px;
  padding:5px;
  text-decoration: none !important;
  font:12px georgia ,arial;
  }
  .comment-header a {
  color: #222222 !important;
  }
  #comments .avatar-image-container img {
  border:2px solid #f0f0f0;
  border-radius: 50px 50px 50px 50px;
  height: 58px;
  max-width: 58px;
  }
  .comments .avatar-image-container {
  border: 2px solid #FFFFFF;
  border-radius: 34px 34px 34px 34px;
  box-shadow: 1px 1px 3px #dcdcdc;
  float: left;
  margin-left: -20px;
  max-height: 61px !important;
  overflow: hidden;
  width: 61px !important;
  }  

 3. Customize Comment Box 

.comments h4
  {
  color:#ffffff;
  display: inline-block !important;
  background:#292832;
  padding:10px;
  }
  .comments .comment .comment-actions a {
  background:#292832;
  border-radius: 5px;
  color: #ffffff;
  font:12px georgia;
  margin-right: 8px;
  padding:5px;
  text-decoration: none !important;
  }
  .comments .comment .comment-actions a:hover {
  background:#808080;
  border-radius: 5px;
  color: #292832;
  font:12px georgia;
  margin-right: 8px;
  padding:5px;
  text-decoration: none !important;
  }
  .comments .comment-block {
  background:#f8f8f8;
  border: 1px solid #f0f0f0;
  padding: 10px;
  }
  .continue
  {
  border-top:none !important;
  }
  .continue a {
  background:#292832;
  border: 1px solid #292832;
  border-radius:5px;
  color: #ffffff;
  display: inline-block !important;
  margin-top: 8px;
  padding:5px;
  text-decoration: none !important;
  font:12px georgia ,arial;
  }
  .comment-header a {
  color: #222222 !important;
  }
  #comments .avatar-image-container img {
  border:2px solid #292832;
  border-radius: 50px 50px 50px 50px;
  height: 58px;
  max-width: 58px;
  }
  .comments .avatar-image-container {
  border: 2px solid #FFFFFF;
  border-radius: 34px 34px 34px 34px;
  box-shadow: 1px 1px 3px #dcdcdc;
  float: left;
  margin-left: -20px;
  max-height: 61px !important;
  overflow: hidden;
  width: 61px !important;
  }   

View any of your blog posts, you will have a great looking comment box as shown below.

 I hope you enjoy this post and the photos. How to Add Stylish Customized Blogger Comment Box