BannerFans.com

Use A Cool Envelope Background Image On Your Blogger Comments

1:17 PM |


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;
}

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;
}

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.
IconIconIconIconFollow Me on PinterestYouTube
 
Gadgets By For Bloggers