Tuesday, November 12, 2013

How to add a custom signature in Blogger


I created a tutorial on how to add a custom signature at the bottom of your Blogger posts, because it took me 3 tries and I had to use information from three different tutorials to get it right.  Part of the issue is that a lot of the tutorials don't use the new Blogger interface...they are still using the old one.

Here's the tutorial....

Step 1: Create a signature.  I use Photoshop Elements, but you can use any program you'd like.  The key is to make sure your canvas or photo size is 200 pixels wide by 70 pixels tall.  It's small...but it's perfect.  Trust me.   Save it as a PNG file, with the transparency button checked so that there are little grey and white squares in the background.  That way, it will work with any Blogger background color. Save it to your computer.

Step 2: Upload your file to Photobucket.  This will allow you to have a custom Direct URL for your image.

Step 3:  Go to Blogger and Click on Template, then Customize, then Advanced, then scroll down to Add CSS in Blogger.

Step 4:  Copy and Paste this code into the Add CSS in Blogger section:

.entry-content:after {
content: url(YOUR-IMAGE-URL-HERE);
}

Step 5:  Now delete the YOUR-IMAGE-URL-HERE part and paste in the Direct URL from Photobucket.   It should start with http:// and end with .png

If you scroll down in Blogger you'll see your signature at the bottom of the post.  Click Save and you're done.

This applies itself to all future AND old Blogger posts!  So easy!!! 

2 comments:

  1. THANK YOU!!! Now if you can tell me how to make a custom header I will just be forever in debt to you! Thank you sooooo much for this tutorial...HUGE help!

    ReplyDelete
  2. Hi, is there a way to add text just beneath the image, such as links to places you can be found?

    ReplyDelete