New Published Post: How To Fix Adsense Not Showing After Redirecting Blogger To Custom Domain
Like Us:
Facebook



How To Customize The Comment Box In Blogger


One way of attracting the readers to give comment to your article is having a comment box more  unique and attractive to them. As bloggers we all know that comments are  vital part of a blog article  because  through it  the readers' can reflect their opinions regarding  the post or our blog, so it is very necessary to spend a little of our time to make this part looking more presentable, accessible and neat. In this tutorial, I will show very simple steps on how to customize the comment box.


customize comment box in blogger





How to Add Beautiful Customization with the Comment Box


Step1. Go To Blogger Dashboard
Step2. Click Layout >> Edit HTML
Step 3. Check “Expand Widget Templates”  box at the top right corner.



Step 4. Search  the code below,  use" Control F" to help you locate faster the code. (Select  the second occurrence of the code)

<div class='comment-form'>
Step 5. Replace it with code below
<div id='btt-form'>

 Step 6.   Now Search for the code: ]]></b:skin>,  again use  Control F

 Step 7.   Just above ]]></b:skin>, you paste the following  code below,

#btt-form iframe{
background:#ffffff url(http://3.bp.blogspot.com/_7wsQzULWIwo/Sx1aCAx_44I/AAAAAAAACeo/HZz8QQT0etM/s400/plz-do-not-spam1.gif) no-repeat bottom right;
border:7px solid #C7C7C7;
padding:5px; font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px; }
#btt-form iframe:hover{
background:#ffffff url(http://1.bp.blogspot.com/_7wsQzULWIwo/Sx1Zs5rasXI/AAAAAAAACeg/0fBam5AkHS0/s400/plz-do-not-spam2.gif) no-repeat bottom right; border:7px solid #7EB2AC;
}
#btt-form a{
color:#7EB2AC;
}

Customization of the  three parts of the code:
Note: you can choose here your various types of hexadecimal colors.

1. First part of  the code (#btt-form iframe )
 >> Comment box in in active mode (not in hover effect)

  • To change the background of the comment box frame, change #ffffff 
  • To change the the background image , change the url with your own url image. You can place it in top left, top right,bottom left or bottom right position. In this blog , I position it in the bottom right.
  • To change the border size of the frame, change 7px 
  • To change the border styles, change the  solid with dotted or any border styles that you like. for more border styles, click here.
  • To change the  border color, change #C7C7C7
  • To change the distance between the comment form border and the text area, change 5px
  • To change style of the text,  bolness or normal, font size,font family, color and the width of the text "Comment as", change the attributes of the following code:
           font:normal 12pt "ms sans serif", Arial; color:#7EB2AC; width:450px

2. The second part of  the code (#btt-form iframe:hover)
 >> Comment box in hover effect mode

The explanation with regards to its border, background,  etc. is almost the same, the only difference is it will only affects the frame styles when the mouse will hover in it.

3. The third part of  the code (#btt-form a)

This part explains the color of these two links -> “Sign out” and “Subscribe by email” . These links appear at bottom right corner of every Blogger Comment Form.

To change the color of the text "Sign out" and "Subscribe by e-mail", change the  hexadecimal color code "#7EB2AC"


 Step 8. After customizing  the  CSS code above, save your  template and you are done. Enjoy!
credits goes to My bloggertricks with little modification by me.
About the Author:
tilt  hover effect
Hello folks! This is Viral Apps, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
Follow him @ Twitter |Facebook


Express yourself!
28 comments : Post Your's Buddies!

Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please Keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.

Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.

Best Regards,

Cerwenlloyd Gefjun
  1. I would like ti change the text "Subscribe by email" in the comment box. Could you help me? Thanks.

    ReplyDelete
    Replies
    1. Hello Mirela, Sorry for the late reply for I was keep on researching on the answer of your query. For the the meantime I'll just give you an alternative way of putting a subscription button along your sidebar wherein you can customize the text " Subscribe by email" Please click here for the tutorial. Have a blissful blogging!

      Delete
    2. You are always welcome and enjoy!

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Hi,
    How did you made the appearing of comment box only on posts without displaying it in the homepage? Hope you'll reply me..I'd like to try that for my blog too: http://www.josephstutorialshop.blogspot.com

    ReplyDelete
    Replies
    1. Logically Blogger only allows us to put/ show comment in our posts not in home page since it will be awkward or untidy to see comments flooded at that place.

      Delete
  4. Hi, i would like to know how can i make the replie box to a comment appear underneath it like yours do in here? Apreciate an answer, tanks.

    ReplyDelete
    Replies
    1. Hello Wonderwall, To customize your author's comment box like mine, please click this link. Hope it will help you and thanks for dropping by. God Bless!!!

      Delete
  5. I think there is a common misunderstanding or failure to communicate about these comments widgets. The primary problem for my wife and me is that the Blogger button for the comments is essentially invisible to most of the people who look at our blogs. This is the text, only much brighter and colorful than what’s on the bottom of my blog page.
    Posted by Bud Rudesill at 4:02 PM No comments:

    The problem here is that the words, No comments, does not indicate to most people that these words are a button to begin the process of adding a comment. We have pled with people to leave comments and they repeatedly tell us they don’t know how to do it. Even if comments are added, the words just change to 1 comment, 2 comments, etc. budrudesill.blogspot.com and chancewriter.blogspot.com

    Yes, it would be nice to customize the form so one could screen the comments, and etc. But that isn’t the overwhelming problem with blogger.

    Bud Rudesill



    ReplyDelete
    Replies
    1. Hello Bud, I think we have the same problem on how to change the words "No Comments". As of this time I keep on experimenting on how to customize that..Hope to solve this problem..
      Thanks for your valuable comment and God Bless!!!

      Delete
  6. I recently came across your blog and have been reading along. I thought I’d be leaving this page without leaving a comment but indeed you make a good job, keep it going and I’ll keep coming back.

    www.n8fan.net

    ReplyDelete
  7. i enjoy most of your articles,the articles are so nice for readers.

    Mario
    www.gofastek.com

    ReplyDelete
  8. comprehensive and useful

    www.azlanrumadi.blogspot.com

    ReplyDelete
  9. This is an informative blog by which I have got that info which I really wanted to get.

    ReplyDelete
  10. This is very effective for me. Thanks for your article.

    ReplyDelete
  11. Hi I would like to ask how can I move the Reply Button on the comment to the right side. I tried using { text-align: right;} but it doesn't work.

    ReplyDelete
  12. I want to open comment link in new tab. Plz help me

    ReplyDelete
  13. This tutorial didnt work for me please help. :-(
    www.ksisoooofly.com

    ReplyDelete
  14. Great Post Gefjun!
    Thanks for writing such Ultimate Post about customized blogger comment section. Your post is just Amazing! Thanks for sharing such useful info. Looking forward for such lovely posts.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...