[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 codeLog 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='"post-body-" + 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='"post-body-" + 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 codeI 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 CSSLog 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;}