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
The steps for this are explained i the video with the code needed and a summery of the steps below.
Code 1.
.comment-form {
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibl13SxEKSOQGrXxcrGSwSWLnq52K-TtKYUykGIlQylo1fTQ17uIPlFv10dTzybiMn9h2UqEewqS06u0e67ocJ978D3iu200yIqvIrt2UrTNuCxbIxbZwsudaBS8LB8fjRYrrtd0d2lko/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/AVvXsEibl13SxEKSOQGrXxcrGSwSWLnq52K-TtKYUykGIlQylo1fTQ17uIPlFv10dTzybiMn9h2UqEewqS06u0e67ocJ978D3iu200yIqvIrt2UrTNuCxbIxbZwsudaBS8LB8fjRYrrtd0d2lko/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 on our blog.
Drop Your Comments And Questions Below.
