Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



Add a Signature to Your Posts in Blogger

This little tutorial was requested by a reader and I am sure it can help out a few of you. I’m going to show you how to add a signature to all of your new and existing Blogger posts. The best part about this method is that you can change out your signature at any time and the changes will reflect on every post. You don’t have to worry about including it at the bottom of every post you create and it only takes a few minutes. Follow along below:

 

1. Create your signature image

First you’ll need to create your signature image using a photo editing program like Photoshop, or the online Pixlr editor. Get creative. Maybe you just want text, or maybe text with an image… Or even a scan of your actual signature! I created mine on a transparent background so it easily blends in with my blog background colour. If you do the same, save it as a PNG. Otherwise a JPG will work.

 

Make Blogger Signature

 2. Upload your image to Photobucket

Next you’ll need to store that image somewhere. Upload it to a site like Photobucket.

3. Add the code to Blogger

Visit the Template > Edit HTML page in Blogger. If you click inside the text editor and press CTRL + F (or CMD + F on a Mac) it will open a search box in the top right corner of the editor. In this box, enter: <div class=’post-footer’> and press enter. It will find one instance of it, but you will want to find the second instance, so hit enter again to jump to the second instance.

Now copy your image code. You can get the image code from Photobucket if you click on the image you uploaded. Copy the HTML share link from the text box in Photobucket and paste it directly above <div class=’post-footer’>.

Your finished code should look like this:

<img src="http://YOUR-PHOTOBUCKET-IMAGE-URL.png" border="0" alt="your photo name"/>
 <div class='post-footer'>

If you want to add a bit of space above the signature, just add a couple of line breaks above the image code, like so:

<br/><br/>
 <img src="http://YOUR-PHOTOBUCKET-IMAGE-URL.png" border="0" alt="your photo name"/>
 <div class='post-footer'>

Preview your layout to make sure everything appeared as it should and save your template!

Add a signature to Blogger posts

There you have it, an easily customizable post signature. Signatures add a little bit of personalization to your posts and can be designed to match your blog layout. I hope this tutorial helps and as always, if you have any requests for topic suggestions, feel free to send me a quick note using the contact page.

 


  • Elizabeth

    Wait, so I’m stuck on the part when you search up the because when i use the search box, the line of code doesn’t actually show up. Any idea on how to fix this?
    ( I’ve also seen this but i dont see the anywhere… hmm)

    • Vera St. Germaine

      Are you copy and pasting the code? Because you’re going to have to type it into the search field for it to work.

      • Elizabeth

        yep, i copy and pasted in, then I tried typing it in. It didnt work… oh well

    • Sara S.

      Yeah It’s not working for me either. My template doesn’t have the code :/

      • I just checked your blog and it definitely has the post-footer. Make sure you aren’t forgetting the dash between post and footer.. i.e. post-footer, and re-read the instructions above 🙂

    • So after many hours of searching.. yes hours.. I was trying to add in some other code that required me to find the same div class footer thing. The search never worked for me. You go to your HTML code. click Jump to Widget. click Blog1. Go down to the line that says “” and expand it. You will find the “” in there, scroll down and look for it. Hope this helps.

      • Jo Wilkes

        Thank you for this Madame Dream, was struggling to find it until I saw your instructions! x

  • eLi

    Hi Dana,
    I love all of your tips for setting up a Blogger Blog!! I recently added my signature, but my signature is showing up on top of my actual post instead of at the end of the post. Not sure what I did wrong, but wondered if you might be able to help me out.
    Thanks Bunches!!

  • Anna Yakisan

    Hey Dana,
    I don’t know what I did wrong but it kind of does not work for me, it always says something like ”…..must be well formed” and I just don’t get it. :/ Could you help me out?
    Thank you! 🙂

  • Beks

    Hi, Dana. I tried to seach for on both of my blogs, but couldn’t find it. Is there another way to do this?

    • it should be div class=’post-footer’
      make sure you are typing it exactly

      • Beks

        Thanks. I’ll try that. I was just copying and pasting, but I’ll give this a whirl. 🙂

  • Scratch that, it is now showing up on my home page when I only want it on post pages. Help?

    • that’s another tutorial… you need to use Blogger’s “conditional statements” to make certain things appear on some pages and not others. In short, you’d need to wrap the signature code in this:

      …. signature code here ….

  • Rosie Green

    It was all going well until I pressed preview and my signature is at the top of my posts instead of the bottom, any suggestions?? Thanks!

  • Dana Deniece

    Hi. Just so you know, I was browsing the web for some tutorials on how to add signature on blogger posts. Then, it lead me to this posts. Only to find out that we actually have the same name. Yey! Coincidence huh? LOL.

  • Mariah Antoinette

    Help me please 🙁 I’m able to put the code correctly but whenever I save it or preview the template something always pops up and says something like this: Error parsing XML, line 1529, column 5: The element type “img” must be terminated by the matching end-tag “”. when all that I see in the place it says is the code 🙁

  • Ashley Null

    I love and follow your blog, there’s so much great information here. I’ve created the image with a transparent background, saved it as a png, and got it to show up on my posts, however it shows up with this black shadow around the image… any advice on how to fix this?
    Thanks so much.

    • Add to your CSS:

      .post-body img {
      box-shadow:none;
      border:none;
      }

  • Hi, Dana. I tried to seach for on both of my blogs, but couldn’t find it. Is there another way to do this? I am trying it well but there is nothing!

  • Is this doable for a blogger blog with contributors? How do you designate a signature to one specific author?

  • Alice Gilhooly

    hi dana
    is there a certain size that should be used when making the file and should it be saved as a png? also how do find out the name just as what you uploaded it as?

  • Susie Jefferson

    Totally excellent! Thanks so much for this – the one I’ve been using puts the signature in the footer section under the social icons (really annoying). I love this one, and have pinned it immediately.

  • Hi Dana, I just found your blog and I am LOVING it. I am new to the Blogging World. I have no idea what I am doing. LOL. I started my blog w/ WordPress and I have had a heck of a time with it. I tryed several themes and I can’t figure out how to do a lot of things. I have researched on Youtube and that has help with some of the basic. So on that note I have decided to switch to Blogger. So far MUCH BETTER FOR ME. I have a couple of questions. Once is the signature. I am confused when you stated “click inside the text editor” I am sorry, but I am assuming this is all the codes ? LOL. I told you I don’t know how to do this stuff, but I am willing to learn and I am fighting thru it. Second question. As I mentioned before. I have WordPress.w/ Bluehost, how can I switch me domain name over to Blogger?
    thanks so much

  • I have successfully done this and added a bloglovin’ button but it doesn’t show on the mobile template, can you help? Thanks, Niamh xoxox

  • Maeve Sutcliffe

    hey, I tried to search but it when I press enter after searching it in the search box it doesn’t do anything? please help

  • Maeve Sutcliffe

    when I look up on my blog template edit HTML nothing comes up? Help please 🙂

  • You can try electronic signature as well to reduce paper work. eSignly.com offering electronic signature services with affordable API plans.

  • jennifer jacson nail

    wow, creating the signature is so easy, Thanks for this amazing tutorial, I did not know about pixlr editor as i am using http://toolpic.com which is same like pixlr But i find pixlr easy to use Thanks once again

  • Janez Novak

    Hi. One of the signature possibilities is to include the countdown or up timer image. I found this webpage timer.vrtiljak.net
    It looks very useful to me.

  • I want to make it on my http://www.gilgeek.com/ but i want a clickable signature (with link)
    Can you help me with that? Thx in advance

Navigate