How to add a signature to blogger posts

add a signature to blog posts on blogger

I previously wrote a post about adding a signature to your WordPress blog so I thought I would do a tutorial for those of you on blogger. As always with Blogger, coding usually depends on the template you are using so I have two methods below on how to automatically add a signature to the end of your Blogger posts. I’ve seen a lot of tutorials that show you how to add an image to to the post template in settings, but this only adds it to posts from then on. That way works fine but it’s harder to change in the future and it doesn’t include previously published posts. Here’s how to automatically add it to every post.

[postwarning]

Create your Signature

The first step is to create the image. To do this Iโ€™d recommend using GIMP, a free alternative to Photoshop. Create a new document with a transparent background, add your signature and save it. If you have a transparent background, save it as a .png file. Upload the image to a hosting site such as Photobucket.

Add a signature to your posts on Blogger

Method 1 – add signature to after post content in code
Log into your Blogger account. Go to Template > Edit HTML. Click into the HTML box and search for <data:post.body/> until you find something similar to this

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
        <data:post.body/>

        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
    <b:else/>
      <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
        <data:post.body/>


        <div style='clear: both;'/>

This may look slightly different depending on the template you are using. You will probably find 2-3 instances of this code in your template. Skip the first <data:post.body/> which is for mobile and look for the second and third instances as shown above.

Underneath both of the <data:post.body/> paste this

<div class='sign'> <img src='DIRECT URL HERE' style='border: none; background: transparent;'/> </div>

or if you ONLY want it to appear on the post page and not the home page, add the following

<b:if cond='data:blog.pageType == "item"'><div class='sign'> <img src='DIRECT URL HERE' style='border: none; background: transparent;'/> </div></b:if>

Method 2 – add signature to above footer in code
I recommend this method if you have post excerpts set up on your blog. Log into your Blogger account. Go to Design > Edit HTML > Click “Format Blog” (this used to be Expand Widget Templates). Click into the HTML box and search (CMD F on Mac or CTRL F on a PC) for something similar to code below. This may look different depending on the template you are using. You may find two instances of this in your template, add it to the second one which is further down.

<div class='post-footer'>

or

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

And paste this code beneath it.

<div class='sign'> <img src='DIRECT URL HERE' style='border: none; background: transparent;'/> </div>

or if you ONLY want it to appear on the post page and not the home page, add the following

<b:if cond='data:blog.pageType == "item"'><div class='sign'> <img src='DIRECT URL HERE' style='border: none; background: transparent;'/> </div></b:if>

Method 3 – place item after entry content using CSS
Log into your Blogger account. Go to Design > Template > Advanced > Add Css. Paste the following code into the box which will add it before </b:skin> in your html. Change the URL to the link of your own image. Edit the number to 0 if you want it positioned on the left or alter it higher or lower to move the image left and right. Save settings.

.entry-content:after {
content: url("IMAGE URL");
margin-left: 300px;
}

Style the Image

To alter the position of the signature, go to Template Designer > Advanced > Add CSS and paste the following CSS. This will now appear before </b:skin> in your HTML.

.sign { text-align:left; }
.sign { text-align:center; }
.sign { text-align:right; }

Signature stretched?

If you have code on your blog to make post images full width, then your signature will also be full width. This only works for method 1 and 2 as method 3 is adding the signature as part of your post. Use the div class you used above to resize the image, example

.sign img{ max-width: 100px !important;}

or

.sign { max-width: 100px !important;}

signature

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

39 comments

  1. Elisa on

    Hi, tried this tutorial and it seems to be working great! the only problem I have is that when I add the signature and move it to the centre of the post it moves all the buttons at the end of the post (e.g. labels, posted by, comment link, etc.) to the centre as well instead of leaving them where they are now. Any idea on how to fix that?

    Thank you.

    Reply
    • Ellie M on

      Hello lovely, I have updated the post as I realise a lot of people may have meta data beneath their blog posts which makes it incipient to style. Both methods above will work better and allow you to properly style the signature. Apologies x

      Reply
      • Elisa on

        Hi so sorry to bother again, it all works except that it adds the signature not only at the end of the post but just before the “Read More >” jump break link as well. How would I fix that? Thank you so much for the help!

        Reply
  2. Cherina on

    Hi! Thank you so much for this! Worked perfectly fine for me the only thing that I’d like to know is how can I get the signature to be before the “LinkWithin” script that I have installed. It shows after the LinkWithing script. Do you know how to fix this? Thanks so much Ellie.

    -Cherina

    Reply
  3. Jen on

    Hey Ellie!
    Ive just stumbled across your blog and it is fantastic! I have already made use of some of your tutorials!
    My problem is this – i started my blog not too long ago and when i did i found a HTML code elsewhere that automatically added my signature image to the end of all my blog posts.
    I now want to take advantage of the jump break feature, but when i do this my signature is still showing and although i want it at the end of my full blog posts i do not want it at the end of the “previews” on my home page.

    Are there any ways around this that you are aware of? Or will i need to manually insert my signature at the end of every posting to avoid this? If i need to resort to that, could you give me some idea as to how i can find the HTML coding to remove the automatic signature posting?

    I hope this all makes sense.

    Reply
    • Ellie M on

      Hello, there is a way when using method 1. First thing I need you to do is download a backup of your template – you’ll find a tutorial here if you are unsure how to do so. Next go to Template > Edit HTML and find .entry-content:after which you added earlier. Wrap it in style tags and the conditional tag so it looks like this

      <b:if cond='data:blog.pageType == "item"'>
      <style>
      .entry-content:after {
      content: url("IMAGE URL");
      margin-left: 300px;
      }
      </style>
      </b:if>

      The conditional tag will tell Blogger that you only want the signature images to appear on your post pages. Select this entire code and cut it (copy and remove). Now find </html> at the very end of your template. Paste the code you cut directly above </html> and save.

      Reply
    • Ellie M on

      Yes it is possible when using method two. Simply wrap the image in a link so it looks like this

      <div class='sign'> <a href="YOUR-LINK" title="DESCRIPTION"><img src='DIRECT URL HERE' style='border: none; background: transparent;'/></a> </div>

      Reply
    • Ellie M on

      What exactly won’t work? Is a blank box showing up, is it not accepting the code, is the image not showing at all? Make sure you’re using the direct image share url and not the page’s url.

      Reply
  4. Karen on

    I’m so glad I found this site. It’s been so helpful with adding my signature to my blogger websites. I did have a little trouble with method 2 so I tried method 1 and it worked great. I don’t know if it’s because I just setup the blog yesterday or if it’s the template I’m using, but method 2 would not work for me at all.

    I’ll be perusing your website to find other helpful things I can find.

    Aloha,

    Karen j

    Reply
  5. Alex Stella on

    Hi, these tutorials have worked well for me but I can’t seem to get the images to appear on the blog in place of them there’s just an icon of a page with a hill an cloud (sorry for the rubbish description) as if the images aren’t loading or something so I’m not sure what is wrong?

    Thanks in advance
    x

    Reply
    • Ellie M on

      Hello, that means that it can’t grab the image. Usually this is because the wrong link was used or the image is in a private folder, make sure you’re using the direct image link and not the page link ๐Ÿ™‚

      Reply
  6. Becky on

    Hi Ellie,
    I’d love to add a new post signature to my blog but I can’t figure out how to remove my old signature. It must be hidden somewhere in the coding. I’m pretty savvy at figuring these things out usually but I’m at a loss on this one. I’m using the blogger simple template. I added my original signature before they changed this this last time. I’m hoping you can help me because I’m beating my head against the wall. Thanks in advance!

    Reply
    • Ellie M on

      Hello! Unfortunately I’ve no way of telling from here. Have you checked the area shown in method 2 above? Is your signature pre-loaded into the editor when you start a new post? Check Settings > Posts & Comments > Post Template. Let me know how your get on.

      Reply
  7. Esmeralda Burgos on

    Hi Ellie!

    First and foremost, I love all your tutorials! Whenever I want to do something on my blog, I go through all your tutorials first, just in case there’s something new I want to try. So thank you for being so generous and posting it all for us humble people. I actually am using this one, and it worked perfectly (method 1) until the other day when all of a sudden a signature pops up on the right side of the blog, past the column. It’s just there, floating about. I have no clue how to fix it. If you can, that would be great! If not, then no problem. I’m still quite grateful for all the tutorials! ๐Ÿ™‚

    Reply
    • Ellie M on

      Hello lovely, thank you so much! You’ve attached the signature to your nrelate widget and not the post itself. Go to Template > Edit HTML and a few lines above ]]> </b:skin> you’ll see div[id*="nrelate_related"]:before { content: url("http://i7.photobucket.com/albums/y258/Esmy04/signature-1.png"); margin-left: 300px; } so replace div[id*="nrelate_related"]:before with .entry-content:after and save. That should fix the issue!

      Reply
    • Ellie M on

      Hello, can’t find either code in your template so can’t check for errors. If you redo one of the methods I can take a look for you then. Make sure you’re using the direct image url and not the page url.

      Reply
  8. Tanisha on

    This isn’t working for me. It shows up but its enlarged and blurry and also shows up on the main blog under the excerpt thing.

    Reply
    • Ellie M on

      Hello, there was another step that made the signature the correct size for those who have code on their blog to make post images all one size. I’ve adjusted the tutorial to make this step stand out more, follow those instructions to stop the signature from stretching. I recommend method 2 which have a way of stopping the signature from appearing on the home page. Let me know how you get on ๐Ÿ™‚

      Reply
  9. emily on

    Hey, so I tried this, because one: when I resized my images via your tutorial (which was peeerfect, thank you!), the signature that I put up myself after each post came out HUGE, so I needed to make them smaller but I also wanted to be able to have the signature there automatically. I entered the html and it didnt work ๐Ÿ™ is this correct? :

    Thanks, Emily xo

    Reply
  10. kelsey on

    I’m trying to add a signature (the post only version- not home page) and it doesn’t show up at all. I’m pretty sure I’m putting the code in the correct place. Suggestions?

    Reply
    • Elaine M on

      Hey Kelsey. Try adding it normally and see if it appears, then you can go back and add the conditional tag to make it show on single posts only. Let me know how you get on ๐Ÿ™‚

      Reply
  11. Laura on

    My blog template uses method 3 for my post signature, but I’d like to remove it from the homepage only. Is it possible to add a conditional code within the CSS? Here’s how it currently looks (changed the image url)

    .post-footer-line-1{ background:url(“http://image.png”);
    background-repeat: no-repeat;
    margin: 0px 0px 0px 0px;
    padding: 36px 0px 0px 0px;
    font: $postfooterfont;
    color: $postfootercolor;
    }

    Reply