How The Change The Width Of The Blogger Comment Form




| | 9 comments

blogger comment bubbleA very popular recent post we did showed how to add a reply option to the blogger comments.So i decided to add another nice blogger comments trick that can improve both the appearance and performance of your comments.The area you write the text of your comments into, known as the comment form is by default very narrow.This is not a big problem, but when you see the comment forms on other blogs they tend to be similar in width to the post area.This makes the form look better and fit well with the layout of a blog and also it's easier to write comments, especially longer comments.

Changing the width of the comments on blogger is very easy and i have it broke into a few steps for you.First lets look at some examples.I have changed the width of the blogger comment form on one of my test blogs and here you can see the before and after screenshots :

Blogger Comments Default Width

Blogger Comments before change

Blogger Comments After Width Change

Wider Blogger comments

You can also see the comment form on this blog : Wide Comment Form


Changing The Width Of Blogger Comments

Step 1. In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Template > Then Edit Html > Now Proceed > Tick The Expand Widget Templates Box as shown in the video Below :


Step 2. Find the following piece of code in your blogs html :
(Click Ctrl and F for a search bar to find the code - More Info)

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

Note - It may be in your template code more that once, if so change all instances.

Step 3. We now have to change the piece of code i highlighted in red above.

We must change it from Percentage (%) to Pixels (px) and also find a width that suits your template.

The example i showed in the images and test blog is using the minima stretch template and i changed the code :

From - 100%
To- 600px

So now the code looks like this :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='600px'/>

I would recommend first changing the width to 500px, see how it looks and you can go back and make adjustments as required.If your using a custom template you can find the width of your main-wrapper and work with that width.

So that's another nice trick to help your comment area, you can find lots more blogger comment tips here,

Drop Your Comments And Questions Below.


If You Enjoyed This Post Please Take 5 Seconds To Share It.

Stay Connected With Free Updates

Subscribe via Email

9 comments:

  1. Is there a way to change the width of the text area above the comment box? It looks great with the larger box now but strange with the text all bunched at one end. Thanks for your great tips/tricks!

    ReplyDelete
  2. Brother. I lost my comment box, When I tried to add some widgets you mentioned.. What can I do to bring it back? Thanks for all the articles and they all are really helpful..

    ReplyDelete
    Replies
    1. Any resolution to this, same problem here...

      Delete
    2. The comment box totally went ? Did you make a back up before making changes ?

      Delete
  3. Hi...
    How to remove "Subscribe by email" below the comment form?

    thanks in advance

    ReplyDelete
  4. I've tried to make these adjustments and it works on posts where there are no comments, but under posts where there is a comment, the size of the box is bigger than the dimensions that I changed it to. I also did some playing around to see what happens to the box directly after I've posted a comment and it changes to an even different size again (much smaller). Do you have any idea what's going on here?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us