In this post we are going to see how to add a really cool envelope image behind your Blog Comment Form.The envelope image will blend in with the comment form itself along with the Post A Comment Message, Post Comment and Preview Buttons and subscribe by email link.The image is grey with a nice design in the top left and a small icon will be below the subscribe by Email link users click to be notified of replies.
I always seem to be working on a million things and strangely enough i genuinely cant remember working on this.Last week as i was looking through a few test blogs (Must have over 100 now) i came across this on the comments section of one of them.I had even posted a test comment dated November 29 2010 so it was tested and ready to go and then i totally forgot about it ! Who knows what goes on in this head of mine or what great ideas lie hidden in long forgotten test blogs.
Screenshot
Background Image For Comment Form - Video Tutorial
Summery of the steps below.
Code 1.
.comment-form {
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEYrOxwQQ4KW9-cKc1J3ff4NFfOMwIzNE7rDc39rGSPj_dqm3fhyphenhyphenByn-Kyf3T95ANWOCv_M0o5K3uh5xgeGlxu1op-g-EU-V8ZSYp-KEos_1ZQz3LJ3ocSjm3RQGqFylC_Ipm4Dzg8NuY/s1600/leave+reply+comment+background.jpg) no-repeat;
padding: 100px 5px 0px 25px;
}
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEYrOxwQQ4KW9-cKc1J3ff4NFfOMwIzNE7rDc39rGSPj_dqm3fhyphenhyphenByn-Kyf3T95ANWOCv_M0o5K3uh5xgeGlxu1op-g-EU-V8ZSYp-KEos_1ZQz3LJ3ocSjm3RQGqFylC_Ipm4Dzg8NuY/s1600/leave+reply+comment+background.jpg) no-repeat;
padding: 100px 5px 0px 25px;
}
Code 2.
#comment-form {
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEYrOxwQQ4KW9-cKc1J3ff4NFfOMwIzNE7rDc39rGSPj_dqm3fhyphenhyphenByn-Kyf3T95ANWOCv_M0o5K3uh5xgeGlxu1op-g-EU-V8ZSYp-KEos_1ZQz3LJ3ocSjm3RQGqFylC_Ipm4Dzg8NuY/s1600/leave+reply+comment+background.jpg) no-repeat;
padding: 100px 5px 0px 25px;
}
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEYrOxwQQ4KW9-cKc1J3ff4NFfOMwIzNE7rDc39rGSPj_dqm3fhyphenhyphenByn-Kyf3T95ANWOCv_M0o5K3uh5xgeGlxu1op-g-EU-V8ZSYp-KEos_1ZQz3LJ3ocSjm3RQGqFylC_Ipm4Dzg8NuY/s1600/leave+reply+comment+background.jpg) no-repeat;
padding: 100px 5px 0px 25px;
}
Summery
A. Click Design
B. Click Template Designer Link.
C. Click Advanced.
D. Scroll To Add Css.
E. Paste In Code And Click Apply To Blog.
Note - The width of your posts and comment form may make the image be out of line with the comment form.
And that's it you have a neat background image on your comment form.Check out more of our Comments Tutorials and Blogger Tips.
A. Click Design
B. Click Template Designer Link.
C. Click Advanced.
D. Scroll To Add Css.
E. Paste In Code And Click Apply To Blog.
Note - The width of your posts and comment form may make the image be out of line with the comment form.
And that's it you have a neat background image on your comment form.Check out more of our Comments Tutorials and Blogger Tips.