Friday, January 15, 2010

Add a Signature under your post in Blogger

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

post signature in blogger....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!

0 comments:

Based on original Visionary template by Justin Tadlock
Visionary Reloaded theme by Blogger Templates
This template is brought to you by Blogger templates

Visionary WordPress Theme by Justin Tadlock Powered by Blogger, state-of-the-art semantic personal publishing platform