Use A Cool Envelope Background Image On Your Blogger Comments



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(http://4.bp.blogspot.com/_rKG-ziTSNUQ/TPQ8lHdBZNI/AAAAAAAACXs/bDNnEL-S46A/s1600/leave+reply+comment+background.jpg) no-repeat;
padding: 100px 5px 0px 25px;
}

Code 2.

#comment-form {
background:#ffffff url(http://4.bp.blogspot.com/_rKG-ziTSNUQ/TPQ8lHdBZNI/AAAAAAAACXs/bDNnEL-S46A/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.

22 comments:

  1. I have it set for my comments to open up in a new window. I take it it does not work for that – as I tried it and it didn’t change anything

    ReplyDelete

  2. @ Fitz – No im afraid it will only work with embedded comment forms below the posts….Sorry …

    ReplyDelete

  3. No probs. Thanks ๐Ÿ™‚

    ReplyDelete

  4. THANKS GREAT HELP,BUT MANY OF THE TYTORIALS I HAVE SEEN NOT ONLY HERE DONT SEEM TO WORK WITH ARTISTEER TEMPLATES.MAYBE YOU CAN DO A LITTLE SEARCH ABOYT ARTISTEER TEMPLATES AND DO SOME TUTORIALS.THANKS

    ReplyDelete

  5. @ Panos – Most of the code for gadgets and design here is universal.The positions for the code will be different on other platforms but yes many of the tutorials here will work elsewhere.

    Quick Note – Lose the Caps (All Capital letters In Your Comment) everyone online has a thing against all caps ๐Ÿ™‚

    ReplyDelete

     

    Replies

     

  6. krazy4writing (Heidi)April 8, 2012 at 8:35 PM

    Do I have to download the template?

    Delete

  7.  

  8. seo company indiaApril 27, 2011 at 1:34 PM

    That is great post. It’s very nice. Thanks for shearing your ideas.

    ReplyDelete

  9. how to add multiple css . I have worked on your another post “go bump ” which needed css . I entered the css in template designer . Now i need to enter the css of this post . Where could enter

    ReplyDelete

  10. @ anirudh – You can add it above or below the Css you have already added, there is not a limit on how much can be added.

    ReplyDelete

  11. Kristen@fit2feelbetterMay 10, 2011 at 4:00 PM

    Neither of the codes are working for me. Also, I tried looking for the actual code in template but control F doesn’t work to pop up a search. I’m very new at all this! Thanks

    ReplyDelete

  12. Lah @ Lazy Girl ReadsJune 1, 2011 at 9:27 PM

    Thanks for these awesome tips. I feel like a real pro! ๐Ÿ™‚

    ReplyDelete

  13. This works well for my blog…Thanks

    ReplyDelete

  14. Vikki @ She Has Cute Shoes!June 19, 2011 at 9:17 AM

    Great worked first time. Thanks ๐Ÿ™‚

    ReplyDelete

  15. Thanks! works like a charm ๐Ÿ™‚ By the way, you inspired me to get my own domain.

    ReplyDelete

  16. I tried both codes a couple of times each. Neither worked. Each time I went back to the CSS box, it was blank, the previous code I pasted was gone! My comment form is embedded. What am I doing wrong?

    http://KoolBeenz-blog.blogspot.com

    ReplyDelete

  17. it works and looks great! great job! ๐Ÿ˜€

    ReplyDelete

  18. would like to do this but with my own image, please tell me how…many thanks for all the great tutes on here

    ReplyDelete

  19. thanks

    ReplyDelete

  20. Nice but the right side is cut off a bit. Still, nice touch. Thanks.

    ReplyDelete

  21. DeฤŸmesin yaฤŸlฤฑ boyaJanuary 3, 2012 at 8:52 AM

    Dear friend i tryed but with no results..soo i would like to remove that codes but i couldnt finde it..is it in the CSS or not..by the way this trick didnt work for me..
    Thnx

    ReplyDelete

  22. Very awesome. Waited a week after inserting the code. But still not working, Please. Kindly release needed additional code. With Thanks and regards.

    ReplyDelete

  23. omg I am loving your blog. you have helped me out so much. this tip here is fabulous.. love it thank you so much for sharing..

    mysticalscreations.blogspot.com

    ReplyDelete