How to Add a Custom Signature to your Blog

Recently I have been asked by quite a few people how to do certain things on blogger. While I am just about to make a switch over to WordPress, I thought I would share what limited information I have been able to figure out in my time on Blogger.

Keep in mind, there are fantastic designers out there who are more than willing to help you with things like this if you have the money to do so, or just don’t have the time to do it yourself.

I really love Becca over at Jumping Jax Designs. She can help you with your project small or large.

But if you want to do it on your own there are lots of tutorials online to help you out. If you are like me though – just seeing code and html isn’t going to do you any good. I am a visual person.

If you aren’t a visual person, and seeing it laid out without pictures is easier for you head over here. It was a great help to me, I just felt like it needed to be done in pictures.

So I have another blog – it is called Simple Gift ~ Stories from Breastfeeding Mamas. It is a place to share your breastfeeding story no matter what it may be with no judgment. I decided I needed a signature at the end of each post.

I headed over to Picnik and started to create my signature. If you haven’t played around on Picnik I highly recommend it. Lots of fun. It is free, but they also have an upgrade option which I have found to be extremely worth it as much as I use it.

Not 5 minutes later I came up with this little ditty! I like it!

So now I will be integrating putting the signature into the HTML of my blog. Really people, this is way easier then I imagined.

First, go to the Design tab in your Blogger Desktop. See where it says Edit HTML. Click that.

Now that the box is checked you are going to press “ctrl F”(do this by holding the control button and the F key together)

Doing so will bring up a tool bar on the bottom of your screen. It will look like this:

Now in the find box enter the following text: <div class=’post-footer-line post-footer-line-1’> (you can copy and paste it to go faster)

If that doesn’t come up, head over to Blogger Plugins for the two other code searches.

Once you have found that you are going to add your image code to the end of that code.

(img src=’url_of_your_signature_image‘ style=’border:0px;’/) Just replace the ( ) with <>

I get my URL by uploading my saved signature to TinyPic. It will be your last code out of the options.

Insert your Direct Link for layouts in the bolded field:

(img src=’url_of_your_signature_image‘ style=’border:0px;’/) again replace the ( ) with <>

It will now look like this:

Finally add it in after the code!

This was my blog before I added a custom signature.

This is my blog with the custom signature! Easy Peasy!!

I will most likely go back and make my signature smaller, but that is a pretty easy fix now that I know how to do it.

I really hope this picture tutorial helps. I relied a lot on help from other bloggers when I first started out. Just trying to do the same for others.

Thanks to Blogger Plugins for the codes needed to do this picture tutorial!

• Biography of the Author(Read Below)..
• Latest Posts (view them )..

Emily

Emily is a wife & mom living in Las Vegas. The owner and writer at Our Knight Life, Emily loves sharing her two adorable boys and journey through motherhood. Emily has run four half marathons to date and is always training for her next big race. She also enjoys creating healthy recipes for her family and sharing family friendly product reviews.

Latest posts by Emily (Posts)

• Don’t Call It A Comeback - February 7, 2019
• The Little Prince at The Smith Center Las Vegas – Ticket Giveaway - January 31, 2017
• 3 Simple Ways To Add Color To Your Diet @SUBWAY @OfficialSubway - January 13, 2017
• Disney’s Moana in Dolby Cinema at AMC Movie Review - November 27, 2016