Create your own signature:
1. First, figure out how wide your post area is. If you’re using one of blogger’s newer templates: click on “design” in the upper right hand corner of your blog, then “template designer” then “adjust widths.” Your screen will look like this:
Subtract the width of your sidebar from the width of your entire blog, the resulting number will be close to the width of your post area (minus the margin).
2. Now it’s time to create your signature (I use picnik.com {click here for a great tutorial on how to use picnik} or Microsoft Power Point). Make sure that the length of your image is less than your post area size – determined in step one {for example, my blog width is 1112px, my sidebar width is 310px: when subtracted it equals 802px. So I made the length of my image 600px {and a height of 50px]}. Knowing that the blank image is roughly the size of your post area, type your name where you want it to appear in the post. I wanted my signature in the bottom left of the post, so I typed my name to the left of the blank image. Save file as png.
3. Upload image to imageshack.com (or any other file sharing system). Copy the “direct link.” Insert the direct link into the highlighted section of this code:
<img src=’http://img146.imageshack.us/img146/5598/signaturexwz.png‘ style=’border: none; background: transparent;’/><br/>
4. Go to “design,” then “edit HTML,” then click on “expand widget templates.” {At this point I recommend that you save your html code before altering it, click “download full template.”} Search for this line: {it may have a “p class” in front of it}
<div class=’post-footer-line post-footer-line-1′>
5. Insert the code you just created in step 3 immediately after this line.
Click “preview” to see your new signature. If everything looks correct, hit save! If something is wrong, click “clear edits” and try again.
Make your signature’s background transparent: {You may want to do this if your post/blog backgrounds are not white.}
1. Open Microsoft Powerpoint, insert your image.
2. Click on your image and click on the “toolbox.”
3. Click on “transparent color” and then click on the white background of your signature.
4.Right click on the image and click “save image.”
5. Continue from step three in the previous directions.
Another great post in addtion to your blog design series.
This is a great way to add a signature to all your blog posts, it adds the image inside the "post footer".
For some blogs though you may have this area with a different background or shadow and would rather have your signature appear just above this area.
To do that all you do instead is paste the image code on the line before "<div class='post-footer-line post-footer-line-1'/>". And then at the beginning add <div> and at the end add </div> so your line of new code would look something like:
<div><img src='http://img146.imageshack.us/img146/5598/signaturexwz.png' style='border: none; background: transparent;'/></div>
<div class='post-footer-line post-footer-line-1'>
etc etc!
Yay! I'm so glad you're taking the time to comment. I love learning new things!
-Heidi
Ooh! Thanks for the idea! I will have to try this when my kiddos are in bed or something. lol.
Wow, thanks so much for sharing.
This is going to come in handy – when I find the time…
Ok… so i am trying this… I am stumped real quick by step 3… do i need to insert the copied direct link from image shack somewhere prior to editing the HTML?
I guess this is the line that is confusing me:
"Insert the direct link into the highlighted section of this code:
then you had a code there
Thanks for any input!
Hi Beth Anne,
The entire code shown in step three needs to be inserted into your HTML code… but… the highlighted portion of that code needs to be changed to the direct link for your specific image. The highlighted code inside the entire code is just an example.
I hope this helps. If you are still having trouble, let me know.
-Heidi
I cannot get the image to show up. It's a little square in place of the signature. Is this because I used flickr?
Maybe, it could also be that you accidentally erased something on the code. I would try putting your direct link into the code again. You can also email me @ madebyheidi@gmail.com if you need further help.
-Heidi