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

43 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
  14. Hi! This is going to sound really silly, but I've tried creating my signature several times. I've made it in photoshop and have uploaded my image both to Photobucket and Picasa Web Album. I've copied and pasted both your code and the direct link to my image (where you have "Your image URL") but all that shows up on my blog for the signature is a box with a blue square and question mark inside it. What am I doing wrong?

    ReplyDelete
  15. Hi Rosy
    Well, only thing what comes to my mind is, that have you put your image inside " "? they must be there (i don't know, what they are called in English), or you have wrong link. This works for sure, if everything is done right.

    ReplyDelete
  16. I will try again. Thank so much for all your help and your beautiful blog.

    ReplyDelete
  17. Rosy
    For me, the patience is the most valuable skill, without it, I could do nothing. ;)

    ReplyDelete
  18. Hello
    Im from Sweden, I read that you come from Finland, but I dont know if you can swedish! Okey, I try to write in English!
    Thanks a lot for your websait, it helped me a lot to do a blog with three columns! You explained it in an very easy way, I have tried in weeks for to fix this, and than I saw your lovely blog and it was very easy!
    I realy like your templates but it didnt fit with my blog, the sidebars was not okey,
    Check my blog and than you can see Im so proud over me self och thanks a lot for helping me!
    Have a nice day and write to me and say what you thing about my blog!
    Anki

    ReplyDelete
  19. Hi again,
    and please leave a messages in my blog so I dont need to check yours

    hi

    I didnt understand this with signature??????

    ReplyDelete
  20. I always wanted to have a customized signature, I will try and make one now that I know its easy!! :D

    ReplyDelete
  21. You are SO kind! I've been searching for a long while now, on how to add my own signature. Found it on YOUR blog and thanks. Just as soon as I can figure out how to "write" my own sig, I'm adding it to my posts and thanks again!

    ReplyDelete
  22. Thank you very much for this lesson!
    I've done my signature, but there is the problem. When i try to write a massage,it's written after the signature at the bottom. And signature is shown at all space of screen.Have I done smth wrong?

    ReplyDelete
  23. Katarina
    I don't know what's wrong, did you make the signature right size, it should be quite small.

    My signature size is 113 x 38 px.

    And you should go above the signature when you start writing, then it will be under your text.

    ReplyDelete
  24. Hi!

    Today I posted an entry on my blog with a link to this tutorial.

    I'd appreciate your letting me know if that's OK.

    Thanks,

    Nancy Ward
    http://paperfriendly.blogspot.com

    ReplyDelete
  25. Is there a way to make your signature a link?

    ReplyDelete
  26. This comment has been removed by the author.

    ReplyDelete
  27. This was the easiest tutorial I've ever followed and so fun!! I love the designs and am grateful for her generosity. THANK YOU!

    I also wanted to point out that if someone wishes to create a digital signature but does not have the software necessary there is a site online that will do this for free.

    It's called MyLiveSignature.

    I followed all the steps suggested by *iTkUpiLLi* but created the signature there. It can be found at:
    http://www.mylivesignature.com/mls_menu.php

    Just a suggestion, hope this helps! :D

    ReplyDelete
  28. Thanks so much, my dear!

    I was looking for a simple and straightforward explanation and I found one.

    Excellent!

    P.s Your blog is absolutely DARLING, darling!

    x

    ReplyDelete
  29. Oh man, I've been working on this for the last hour, trying to get rid of the border around my signature! Thank you for this conversation, which helped me immensely!! I am such a frustrated newbie at blog design, but little by little, with the help of all of you out there:)
    Thank you so much!
    Wendy
    www.wendygunn.net

    ReplyDelete
  30. The Breitling Watch movement is incorporated into a steel case, Bentley 6.75 measures 43.70 mm in diameter. Navitimer Watches is endowed with a screw-locked crown, as well as a bidirectional rotating and ratcheted bezel. The Navitimer World case is armed with a cambered sapphire crystal, featuring an anti-reflective treatment on both sides.

    Hogan also fits well and light tread. These are all important factors that runners need Hogan scarpe donna and make default. What are the best Hogan scarpe uomo being available executive? We can say Hogan uomo is certainly in the top 10.

    This SMALL WONDER service is generally offered at no cost and is sure to save you a great deal of time, money and frustration if SMALL WONDER DVD COLLECTION find mastering errors. Because there are so many ways to create an audio CD or video SMALL WONDER DVD .

    ReplyDelete
  31. this post is very informative I have always wondered how some people add their own signatures to their posts, I want to do the same now I know!

    ReplyDelete
  32. Hi I have a question regarding the signature. My signature comes up with a box with an x in it. I am definitely putting in the url address to a photo I added in flkr. What am I doing wrong - why won't the photo show up?
    Thanks

    ReplyDelete
  33. Hi
    As you mentioned that your signature is coming with a x i think you meant a cross box which comes up when url of your image does not exist copy the url i.e. in src="Your image url" and paste it in new tab of your browser.If you see the cross box there also then url is wrong

    ReplyDelete
  34. We are a gaggle of volunteers and beginning a new initiative in a community. Your blog supplied us precious info to work on. You've got achieved a marvellous job!

    ReplyDelete
  35. Thanks for this post, I've been all the time in search of this handy articels all over but couldn't find full data supplied here. thank you. and I will just reference a few of you words .

    ReplyDelete
  36. Wow, nice post,there are many person searching about that now they will find enough resources by your post.Thank you for sharing to us.Please one more post about that..

    ReplyDelete
  37. This is really fantastic work friend..The Way in which You represent this blog is awesome.I really appreciate your work. Keep it up in future.

    ReplyDelete
  38. Well done girls, I've runescape gold often wondered where all rs gold this newfangled blogging would get you buy runescape gold and there you Aion Kinah Kaufen are, large as wow gold life (well larger than postage stamp size anyway) on the front page of The Times. Congratulations on being cheap runescape gold their best blog for family cooking.

    He was
    hurt in the first GW2 Gold quarter of Tuesdays win over thee
    Philadelphia 76ers.

    ReplyDelete
  39. Thanks. I always enjoy reading your posts - they are always humorous and intelligent.I am a china tour lover,You can learn more: China tourism | China travel service | China travel

    ReplyDelete
  40. My spouse and i knew what exactly you designed! And after this I realize why you will find there's edge. I'll test and find out only can place a "no border" as well as "put your edge back" instruction to the personal web coding, both sides regarding
    buying runescape gold
    Final Fantasy XIV A Realm Reborn - Gamecard 60 days

    ReplyDelete
  41. Looked for an easy way to do this, and found it! Thank you so much!! All other sites I found were too confusing. You made it so simple to do and I love what I have created!
    website design

    ReplyDelete