Is your word verification cutt off (if you're using embedded comments?)

So this is something you may not have noticed. It may even be a reason you're not getting a lot of comments on your blog!

Please note, this is only for those of you who are using "embedded comments" + have word verification switched to "on" (and of course it's only for those who can't seem to submit a comment!)

So what's the problem?
I only noticed this because it was a problem on my personal blog and I wanted to share with you what to do if you find it happening on your blog too!

Basically, the word verification box is cut off so people can't see the word captcha box and blog comment 'submit' button.

This is what mine looked like:

(note, no "submit" comment button therefore, no comments! Boo hoo!)

How can I check if this is a problem for me?
First of all this is only going to be a problem if you're using the 'embedded comment' option with 'word verification' switched to "on" (these can be found under Settings > Comments).

Look at your blog when you're not logged into Blogger.
{If you are logged in, you won't see the word verification box anyway because you're the blog owner and what's the point in making the owner of the blog verify the comment?}

Try and leave a comment. If you see a similar thing to me above then you've got this problem too.

Don't panic, it's not a big problem.


How do I fix it?

Easy, follow these steps:

1. Log into Blogger and "save a copy of your template" (you should always do this before making changes to your blog in case things go weird).
   
   
2. Tick the "Expand Widget Templates" button (above the big box of code)
   
   
3. Scroll down (or search) for the following code:
   
   

   <b:includable id='comment-form' var='post'>
   <div class='comment-form'>
   <a name='comment-form'/>
   <h4 id='comment-post-message'><data:postCommentMsg/></h4>
   <p><data:blogCommentMessage/></p>
   <data:blogTeamBlogMessage/>
   <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
   <iframe allowtransparency='true' class='blogger-iframe-colorize
   blogger-comment-from-post' frameborder='0' height='275' id='comment-editor'
   name='comment-editor' src='' width='100%'/>
   <data:post.friendConnectJs/>
   <data:post.cmtfpIframe/>
   <script type='text/javascript'>
   BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>',
   '<data:post.communityId/>');
   </script>
   </div>
   </b:includable>
   

   (note, some of the values may be slightly different, you might have a value of 300 instead of 275)
   
   
4. Change the value of 275 (highlighted in green above) to be about 410.
   
   
5. The code should now look like this:
   
   

   <b:includable id='comment-form' var='post'>
   <div class='comment-form'>
   <a name='comment-form'/>
   <h4 id='comment-post-message'><data:postCommentMsg/></h4>
   <p><data:blogCommentMessage/></p>
   <data:blogTeamBlogMessage/>
   <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
   <iframe allowtransparency='true' class='blogger-iframe-colorize
   blogger-comment-from-post' frameborder='0' height='410' id='comment-editor'
   name='comment-editor' src='' width='100%'/>
   <data:post.friendConnectJs/>
   <data:post.cmtfpIframe/>
   <script type='text/javascript'>
   BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>',
   '<data:post.communityId/>');
   </script>
   </div>
   </b:includable>

   
   
   
6. Click 'SAVE'
   
   
7. It should now be working

It may only be a small percentage of people with this problem, but here's the answer if anyone else is experiencing it.