Follow Us on FacebookFollow Us on TwitterRSS Subscribe Follow Us on YouTube

September 4, 2012

Custom Signature in each Blog Post

Design & Embed your own Custom Signature in each Blog Post

There are many different sites or programs you can use to design your signature. Today I'm going to share with you my favorite ones. They are all free and simple to use.

The three main programs I use are Paint, Pic Monkey and Picasa. Paint is the free Microsoft program that comes on every computer that runs their software. I use Paint for solid background colors like these:

<img src="bluebox.jpg" alt="Light Blue Box"> 
<img src="greenbox.jpg" alt="Lime Green Box">

You can then upload your solid colors to Pic Monkey. You might remember me mentioning Pic Monkey previously in Design Your Own Blog Button. You can find it at You can upload an image and add a frame, border, words or even resize it like this:

<img src="sharethelove.jpg" alt="Share the Love">

Another option you have is Picasa. Picasa is great because it works closely and efficiently with your Google Account because....well it's a Google product. In Picasa, choose Create, then Picture Collage. There, you can select a solid background color, an image or images as a background, you can add frames, resize it and much more. It's also one of my favorites because you can design your own Facebook Cover with it as well.

After you have your completed signature image:

<img src="signature.jpg" alt="Bonnie Franks Signature">

You need to upload it to an image host like Photobucket, Flickr or your Picasa Online Album. Then get your Direct Image Url and add it to the HTML code below.

The Signature HTML code you will use is:

<img src='YOUR DIRECT IMAGE URL' style='border: none; background: transparent;'/><br/>

(Please do not remove the Creative Common License)

Depending on the blog platform you use the next steps will vary.

(Always back-up your template before editing)

In Blogger, go to Template, Edit HTML, Proceed, click in the top left "Expand Widget Templates", then on your keyboard hit Ctrl and F at the same time to open the "Find" box in the top right of your screen. Copy and paste this:

<div class='post-footer-line post-footer-line-1'>

into the "Find" box. Once you have found the above footer code in your template you take your completed Signature HTML code and paste directly above it.

Click Preview, and scroll to the bottom of a previous post and your signature should be there. Adding the Signature code into your template will add a signature to all previous and future post. If it is correctly showing, click save and close.

If you want to add your signature manually to each post, you can save the Signature code and copy and paste it to each post as you write it. Another option is to go to Settings, Posts and Comments, Post template. Then add your Signature HTML there. This will add it to all future posts but not past posts.

That's it...not too hard right? As always, if you need help or have questions, please Contact Me.