Use A Cool Envelope Background Image On Your Blogger Comments




| 22 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.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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. 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
  4. @ 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
  5. That is great post. It's very nice. Thanks for shearing your ideas.

    ReplyDelete
  6. 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
  7. @ 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
  8. 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
  9. Thanks for these awesome tips. I feel like a real pro! :)

    ReplyDelete
  10. This works well for my blog...Thanks

    ReplyDelete
  11. Thanks! works like a charm :) By the way, you inspired me to get my own domain.

    ReplyDelete
  12. 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
  13. it works and looks great! great job! :D

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

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

    ReplyDelete
  16. 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
  17. Very awesome. Waited a week after inserting the code. But still not working, Please. Kindly release needed additional code. With Thanks and regards.

    ReplyDelete
  18. 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



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us