Sunday, November 1, 2009

Using image as your blog post signature

Recently I've been looking at some craft blogs for inspiration for decorating my baby's room and I noticed that a lot of those blogs have nice signatures below their blog posts, instead of just normal text.

There are 2 ways you can achieve this in Blogger, but first of all you need to choose or create an image file to be used as your signature. The image will preferably has a small file size so that it will load faster, and has transparent background so that it will match whatever your blog background is.

I used Adobe Photoshop to create mine but I'm sure you can use any image editor to create it or use some readily available online software to create your signature. Next you can upload it to Picasa or other image hosting service, and get the URL of that image. The easiest way to get the URL is to right click on the image once you have uploaded it, and then select "Copy Image URL" - note that the exact wording will vary based on the browser you are using.

Once you have your image ready, you have 2 options:
  1. Edit your blog template - this will affect all your previous and future blog posts
  2. Edit your post template - this will only take effect on your subsequent blog posts

Let's do the first option first..
  1. Go to your Dashboard > Layout > Edit HTML
  2. Save your current blog template, in case you mess up!
  3. Click on "Expand Widget Template"
  4. Search for the section that says <data:post.body/>
  5. Add your image URL by typing this just right after that line <div align="left"><img src="YOUR IMAGE URL HERE" style="border:none;" /></div>
  6. Click "Preview" and make sure that everything is ok.
  7. Click "Save Template" when you are done.

Now the 2nd option is less complicated..
  1. Go to your blog Dashboard > Settings > Formatting page
  2. Scroll down and find the "Post template" section
  3. Add your image URL by typing this just right after that line <img src="YOUR IMAGE URL HERE" style="border:none;" />
  4. Click "Save Settings" when you are done
  5. You can test whether you have done this correctly by attempting to create a new blog post, the image signature will be pre-populated there for you.

Happy trying!

Related posts:

Related Posts with Thumbnails