You've seen it on the blogs of other bloggers: a post signature. An image of the blogger's name in a cool font, or maybe a cute little image next to their name when they sign off. And you really would like to close your own blog posts in such a personal way, but you just don't know how. No worries, I'm going to explain to you how you can add your own personal signature to all your posts in today's tutorial. Let's start!
We have to start with a signature image. If you know your way around with an image editing program you can create your own signature in a nice font and color. If you don't know how to do this, there is the option to buy such a custom made signature on Etsy. In my shop I offer this option. For $3.00 you will get a signature in the font of your choice and the color of your choice (
see it here).
I'm going to use this signature that I've created for myself:
The next step we have to take is to store this image somewhere online. The coding for putting this image under our blog posts needs a referral to a place online. We can either store this image on an online image storage site like
Flickr or
Photobucket (these programs will create a link to the image which you can use for the coding), but for this tutorial I will use the method to store the image online on your own blog. To do so you need to create a draft post first (a post that will not be published).
Let's go over to Blogger and make a new post:
Make this new post a draft post. Meaning that you save it for yourself, but you don't publish it. To keep things organized on your blog give it a recognizable title. Then click the 'Add Image' button and upload your signature image to the blog post.
The image is now uploaded, before we go any further, save the blog post first.
Put your mouse over the signature image and click on it with your right mouse button. A little pop up screen will appear now. Select the option that lets you make a copy of the link location. Then leave this post (without publishing it!) and go back to the Blogger Dashboard.
In the Blogger Dashboard, click on the 'Template' button:
Then choose the 'Customize' option:
In the following screen that appears you select the 'Advanced' option:
Now scroll down and select the 'Add CSS' option:
Now paste the image link code into the box that appears:
Right now we've got one part of the coding added. The other part is of the coding is this:
.entry-content:after {
content: url(YOUR-IMAGE-URL-HERE);
margin-left: 250px;
}
Copy this piece of coding and paste it in the box underneath the line of coding that you've just added.
Now remove this text from the coding: YOUR-IMAGE-URL-HERE
Then clip the line of coding that we pasted into the box first (the link to your image) and copy it right on the spot where YOUR-IMAGE-URL-HERE was before. It will look like this:
Don't forget to save it by clicking the 'Apply to Blog' button and now you can view your blog to see your signature image under your posts:
LITTLE NOTE
Maybe you have to create some empty lines at the bottom of your blogpost to create some space between the last line of your post and your signature image. I made 3 extra lines in the example.
The 'margin-left: 250px;' in the coding shifts your signature 250 pixels from the left margin, play around with this number in the coding until you have the image positioned where you want it. You can take out the margin-left coding if you want the image to appear on the left margin of your post.
I hope this was a helpful tutorial for all of you who want to spice up their posts with a personal signature.
Till next time!
