How to automatically add your signature to every blog post

 How to automatically add your signature to every blog post

Adding a signature to every Blogger post is a great way to personalize your posts and add a little bit of your personality to your words. If you’re looking for a way to add a signature to your WordPress blog posts check out related post below.

I’m just going to go over the coding aspect of this project, I’m assuming you already have your signature image, either in .PNG, .JPG or .GIF format and have uploaded it to a site that’ll give you an image URL – Flickr  and Photobucket are free and easy to use, you can either use a Blogger post saved in Draft to obtain an image URL. 

Backup your Blogger Template before editing the HTML

There are a few ways to add a signature to your posts on Blogger, below I’ve outlined 3 of the options.

How to add a signature after your post content:

Log into your Blogger account. Go to Design > Edit HTML > Click into the HTML box and search (CMD F on Mac or CTRL F on a PC) for (something similar to) the 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-body entry-content'>
<data:post.body/>

And paste this code beneath it:

<div style="text-align: center;"><img style="border: none;" src="DIRECT URL HERE" /></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 style="text-align: center;"><img style="border: none;" src="DIRECT URL HERE" /></div></b:if>

How to add a signature above your post footer:

Log into your Blogger account. Go to Design > Edit HTML > Click into the HTML box and search (CMD F on Mac or CTRL F on a PC) for (something similar to) the 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"></div>

or

<div class="post-footer-line post-footer-line-1"></div>

And paste this code beneath it:

<div style="text-align: center;"><img style="border: none;" src="DIRECT URL HERE" /></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 style="text-align: center;"><img style="border: none;" src="DIRECT URL HERE" /></div></b:if>

How to add a signature using CSS

Log into your Blogger account. Go to Template > Customize > Advanced > Add CSS. Paste the following code into the box which will add it before in your HTML. Change the URL to the link of your own image. Save settings.

.entry-content:after {
content: url("IMAGE URL");
text-align: center;
}

Share your successes… I’d love to take a peek at your new signatures!