11.30.2010

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>
or
<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; '/>
<br/>

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;'/>
<br/>

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!!

12 comments:

  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?

    ReplyDelete
  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 :)

    ReplyDelete
  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

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

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

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

    ReplyDelete
  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!!

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

    ReplyDelete
  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

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

    ReplyDelete

Related Posts with Thumbnails