Weekend Project: Automatically add a custom signature to each post

Important update: We've added a built-in Signature Module, which will allow you to add content to the end of each blog post automatically. 

Note: This project uses the Custom CSS feature, which is available to subscribers on the Pro Unlimited plan and above.

Today's project is all about adding a personal touch to each of your posts - without having to do any extra work. We're going to show you how to use the Custom CSS feature to automatically place a custom signature to the end of each post. You can use a scan of your actual signature or an image created with an image editing program.

Here's an example of how your posts will look when we're done.

First, you'll need an image. It should be reasonably sized - not too large, since it's just a little personal touch, not a full-on design element. It can just be your name, a small icon or logo, or a little greeting. Either way, it should be personal and unique to your blog.

Save the image as a PNG, GIF or JPG and upload the file in Library > File Manager. Click the name of the file to open it in your browser. Leave that open - we'll need the URL for the image shortly.

The image will basically just be the background for each post, aligned to the bottom. First, we need to create some space for the image. In Blogs > Design > Custom CSS, add the following:

.entry-content {
padding-bottom: 75px;
}

You'll need to adjust the padding to accomodate your image, plus a bit of space for padding. So if your image is 70 pixels tall, you could make the space 90 pixels to accommodate it.

Now, we'll add in the code for the image, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url(http://example.typepad.com/assets/signature.png) bottom left no-repeat;
}

That places the image at the bottom of the post, aligned to the left. You can also align it to the center or to the right.

Finally, you may wish to add some space right below your image and above the post footer, like this:

.entry-content {
padding-bottom: 75px;
background: transparent url(http://example.typepad.com/assets/signature.png) bottom left no-repeat;
margin-bottom: 10px;
}

That's it! When you view your blog, you should see your special image at the end of each post.

Have a great weekend and happy blogging!

Comments

[Agnes]

Ooh, great idea -- thanks!

[Janet's House]

I like. Perhaps not on every post, but on occasion. Thanks

[Robin Suzanne]

Maybe occasionally but not all the time...but sounds like a great idea!