Do you want to add a signature image to your Blogger posts, but cringe at the idea of going back through your archive to add it to all of your older posts?
You can automatically add a signature image to every one of your blog posts — old and new — with one CSS rule.
Here's why it's so nice to do it the CSS way:
- You only have to do it once. When you add your signature to your blog's CSS, it will automatically appear on every one of your blog posts.
- It's easy to change. If you decide to change your signature image, just change one line of CSS and the signature will update on every single post.
- No borders. When you add your signature image with CSS, it doesn't get the border that Blogger automatically adds to your post images.
- Pinterest-proof. Your readers can't accidentally Pin your signature if you add it with CSS. The Pinmarklet and the official Pin It buttons ignore CSS images.
Ready to give it a shot? All you need to get started is a signature image and your Blogspot blog.
Let's get to it!
Upload Your Signature Image
Upload your signature image to the Picasa Web Album for your blog. After you upload your image, click its thumbnail in your blog's album to open its full-sized version. Then, click the "Link to this photo" link near the bottom of the right column. Set the "Select size" dropdown menu to "Original size" and click the "Image only (no link)" option below the size menu.
Once you've made those two selections, open a new browser tab or window to go to Blogger for the next step. Leave the Picasa page open, you'll need it again soon.
If you don't see the "link to this photo" option, or if the options don't match what you see here, you can get your image's URL by right clicking it and selecting "copy image location" or "copy image URL" from the menu.
Add The CSS
To add CSS to your blog, go to Template > Customize > Advanced > Add CSS in Blogger.
Paste the CSS below into the "Add custom CSS" box:
.entry-content:after {
content: url(YOUR-IMAGE-URL-HERE);
margin-left: 250px;
}
Now, replace YOUR-IMAGE-URL-HERE with your embed image URL from the Picasa album. Make sure to copy & paste the complete URL from the "embed image" box — it will be long!
Here's a filled-in example:
.entry-content:after {
content: url(http://lh6.googleusercontent.com/12345ABC/image.png);
margin-left: 250px;
}
The margin-left of 250px is a starting point; increase or decrease that number until your signature is positioned where you'd like it to be. If you'd like the image to appear at the left edge of your posts, you can remove the margin-left declaration entirely.
Once you've got the signature aligned the way you like it, press the "Apply to Blog" button. Now go check out your posts. You should see a signature image at the end of every post. Nice work!
Additional Placement Options
Signatures on Post Pages Only If you've come this far, you'll see a signature at the bottom of all of your posts, both on your home page and on individual post pages. If you use "read more" breaks, or you just don't want to show signatures on the home page, you can use Blogger's conditional tags to restrict the signature image to post pages only. Detailed instructions for this are in the Appendix.
Signatures for Group Blogs If you have more than one author, you can give each author their own signature with this variation in the Appendix.
Signatures with LinkWithin or nRelate If you use LinkWithin or nRelate, your signature may appear below your related posts thumbnails (this doesn't always happen). Instructions for moving your signature above related posts thumbnails can be found in the Appendix.
