Mar 6, 2009

How to add your own signature to your posts?

This is very simple way to add a personal touch to your blog. First make your signature with any photo editing software, I used PaintShopPro. For the image I used png format, so it's transparent.


And then upload it to your web host, I used Picasa Web Album, to get url address.

And then go to Settings > Formating > Post Template

And paste this code to that Post Template box:

<p><image class="centered"alt="post signature" src="Your image url" /></p>

And that's it!

post signature

13 comments :

  1. Love your Blog! SWEET!!!!!! Thanks for sharing about the Signature!!!!! I'm going to do it!

    Rebecca

    ReplyDelete
  2. Rebecca
    Thank you! And isn't it just so simple trick, but adds nice personal touch.

    ReplyDelete
  3. This is brilliant! I have been using the method as described by another blog background site, and wanted to change my signature... it came out looking very weird & fuzzy. And so complicated! Tons of html to cut&paste, took me over an hour and I still don't like it very much. Your method took me all of 10 minutes, which included creating the png. Thank you so much.

    ReplyDelete
  4. Just a quick query (no doubt I'm doing something stupid). I put the signature on the BladeRubber blog, no problem at all, but I have a border outlining it. Don't know why, as there is no border around the image, which is a png (just the signature, nothing else).

    Is there any way I can get rid of this border? I can't think what the error is.

    ReplyDelete
  5. Susie
    Good to know, that my instruction works, sometimes I have difficulties explain things in English.

    And you did not do anything stupid, the is border around images in posts. But you can take that border away, like I did, althought, it doesn't come then at all, to any images. If you like to do that, go to your html and to post, and change border px to 0, it's usually 1 px.

    .post img {
    padding:4px;
    border:0px solid $bordercolor;

    ReplyDelete
  6. OMG! I've wrote previous comment alredy twice, and now I noticed one more mistake. In the end the 0px, not opx!!!!!

    ReplyDelete
  7. For some reason, 0 and o looks similar, but I mean zero px!

    ReplyDelete
  8. I knew exactly what you meant! And now I understand exactly why there is a border. I'm going to experiment and see if I can put a "no border" and "put the border back" instruction into the signature html, either side of

    src="Your image url" />

    It may work, it may not. I have my signature on Photobucket, and already found I have to delete their image code [IMG] and [/IMG] as all I then had showing was the written text, not the png.

    I'm getting there (slowly) and thanks again for all your help. Can't you tell all this stuff was invented by a man, it's so DIFFICULT, LOL.

    ReplyDelete
  9. Susie
    Good idea, it might work also like that. Hmm...I didn't even thought that, one thought at a time is enought for me. ;)

    ReplyDelete
  10. Well, it didn't work trying to edit inside the Post Template itself. I tried around 8 permutations, and nothing seemed to make much difference, so I went with your advice (above):

    .post img {
    padding:4px;
    border:0px solid $bordercolor;

    I was worried I would lose my section dividers, but I haven't. And the artwork doesn't lose anything by having the borders removed. My signature looks clean and crisp and very professional & I particularly like that the signature goes into the New Post box, so it can be deleted if someone else writes a blog post (BladeRubber has another contributor) whereas the solution I used before put my signature at the end of every post, whether I had written it or not. Again, thanks so much for all your help.

    PS: It might be useful for other html-challenged bloggers to note that if you go into Layout > Edit Html to delete the border, if you click CTRL + F on your keyboard, it will bring up a search box just above your bottom toolbar. You can then enter .post img and the section will be highlighted for you. It saves a lot of scrolling!

    ReplyDelete
  11. Susie
    Great that you got your signature working, and I agree, that borders around images are not needed at all. Specially if you post png.images.

    And so funny, today I used CTRL+F to find something from html. I don't know why I didn't thought that before, but maybe it came to my mind at the same time you thought it! ;D

    ReplyDelete
  12. Thank you very much for this simple but powerful sign idea

    ReplyDelete
  13. Web designer kathaperumal
    Yes, very simple and easy, but gives more than takes. ;)

    ReplyDelete