Add a Signature under your post in Blogger

November 16, 2008

Here's the nice one. How to add a custom Signature under every Post you make in Blogger. So, I have this situation now:

....and would like to change "POSTED BY POCKET" in a way that I add my own signature in the bottom of the post, like this one for example:
WHAT DO I HAVE TO DO?

1. First, we need to make our signature. It will be a picture (image), so if you're making your own, you'll have do it in some Graphic Editor (Photoshop, Gimp, CorelDraw...)You can also use some image (picture) from the web (if it's free to use).

NOTE:
Size your picture properly (Blogger won't shrink it, so do not place huge pictures). For example, the one I used here is 170 x 74 pixels, with a white background (to blend with template background).

2. Next thing is to upload the picture to a free web host service (like PhotoBucket. Picasa, TinyPic....) to get the URL address of it.

3. Now to place it in our template. Back up your template for a start. Just in case. There are two way of doing this:

EASY WAY
Go to:
DASHBOARD ► SETTINGS ► FORMATTING and scroll to the bottom, and you'll see "Post Template". In the box on the right, paste the following code:

<p>
<img style="border:0;" align="right" src="http://i34.tinypic.com/2po36m1.jpg"/>
</p>

...Save Settings.

• you should replace the part in orange, with URL of your picture.
• align="right" means that picture is aligned to the right (you can use "left" or "center")
• "border:0;" with this, we've removed the border from your signature picture...

The only disadvantage of the EASY WAY is that every time you compose your new post, a picture will appear in the Post Box. Don't delete it, if you want your signature to show up.
The advantage is obvious. You can easily remove your signature from specific posts...

HARD WAY (but not so hard...)
For this, do back up your template. Then go to:
DASHBOARD ► LAYOUT ► EDIT HTML, click on "Expand widget templates" in the upper right corner, and using CTRL (Option) + F, find the following line in code:

<div class='post-footer-line post-footer-line-3'/>

...right UNDER it, place this part of code:

<img align='right' height='74' src='http://i34.tinypic.com/2po36m1.jpg'/>

...Save Template.

• you should replace the part in orange, with URL of your picture
• align="right" means that picture is aligned to the right (you can use "left" or "center")
• height='74' you have to put the height (real one) of your signature picture

Now, the signature will appear automatically, under every post.

Here the final result (same for both examples):

You can also remove the default "POSTED BY POCKET" (in my case). Go to:
DASHBOARD ► LAYOUT ► PAGE ELEMENTS, and click "Edit" in the "Blog Posts". Un-check the box beside "Posted by"....Save.

Smile!