How to add a signature to Blogger posts

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.

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;}