DIY Custom Blog Design Part 6: Custom Signature

This is Part 6 of a series of tutorials, if you need to start at the beginning, click here.

I have made my Custom Signature in Adobe Illustrator (Here is a Tutorial if you are interested), but if you don't have Illustrator, or you are just more of a Photoshop kinda girl (or guy).  That is fine too!  If you don't have either, you can use the free Paint.net, or My Live Signature.

I made my signature 175px Wide by 100px Tall, but remember this is custom :)  So once you have your signature made, upload it to your Photobucket account (Start at Part 1 if you need help there).

Next, go to your Edit HTML Page, and click on "Expand Widget Templates".

Do a CTRL-F and find one of these codes below:

<p class='post-footer-line post-footer-line-1>
<div class='post-footer-line post-footer-line-1'>

If you want your signature to be aligned on the left, paste this code directly AFTER the code above:

<img src='your direct image link here' style='border:0px; '/>

If you want the signature on the left, then you are done here!

If you want to have control over where you place your signature, past this code instead:

<img src='your direct image link here' style='border:0px; margin:0 0 0 300px;'/>

Now change the 300px to whatever value that you would like, the image below shows where it will affect the signature, so if you want it centered, enter a value less than 300px, if you want it further to the right, enter a value higher than 300px.

Easy Stuff :)  You are done!!


  1. I'm not sure I understand where I enter the link from Photobucket to link it to my signature in the HTML. Can you help?

  2. In this line:
    img src='your direct image link here' style='border:0px; '

    Put it where it says "your direct image link here.

    I hope that answers your question :)

  3. Hmm my signature has a purplish box around it, i did remove the border, by changing the values to "0px" awhile ago, but then i used your tutorial to move it to the right, and now i have a purple box. ? do you know how to fix it? here is my link: http://everydayhappeningsinthelives.blogspot.com/

    my email if needed: foggymorningjewelry@gmail.com

  4. What if this code isn't in your html? Where do you put it in? Thanks :)

  5. I can't find either of the the codes as well.

  6. Thank you so much for charing your knowledge!!! I am learning alot!

  7. @ The Mackan Family and Michele:
    Are you making sure you have the "Expand Widget" ticker checked? It took me three tries of looking for it before I realized I didn't have it expanded!!

  8. I can't find the code, can you help me please.

  9. I am not sure where I did mistake but after completing all the steps you have mentioned I am unable to create a signature. Please help me out.
    electronic signatures

  10. I've expanded it with the new version. But I still can't find the code. It's simply not there. Don't know what to do.


Related Posts with Thumbnails