Template Editato By Force Downs

Key Lime Digital Designs: Blogger Tutorial :: Add a Signature

Key Lime Digital Designs: Blogger Tutorial :: Add a Signature

Link to Key Lime {A Creative Pixel & Paper Blog}

Blogger Tutorial :: Add a Signature

Posted: 12 Apr 2012 01:57 AM PDT


Hi There! Today I am going to show you how to add a signature to the bottom of your Blogger posts. It is really easy and is a fun way to add personality to your blog!

First you need to create your signature. You can open up photoshop, paint, gimp, or any other image manipulation program. Create you signature with whatever fonts and colors you want then save it as a .jpg.

Here is an example of a blog signature I just created for my friend, Kim. It is 320px x 70px. Which is about the biggest I would suggest you make a blog signature. It should range from 100px – 320 px wide and be about 50px -75px in height.

Here is what it looks like on the blog…

After you have created your signature then you will need to upload it to Photobucket.

Login > Upload > and select your signature .JPG.

Once it has uploaded hover over the image and a little box should pop up. Highlight and copy the Direct Link code and paste into a word document, you are going to use it in just a minute.

It will look like this…

Next login to your Blogger dashboard. Click on Template and the edit HTML.

When You click Edit HTML Blogger is going to pop up a warning box. Just click “Proceed”.

[I Promise we aren't doing anything to scary!]

Now you will need to check mark the box that says “Expand Widget Templates” in the top left hand corner.

Click your cursor anywhere in the text box and then click Ctrl F or Command F [for mac]. You should see a “Find” box on your screen. Mine is at the bottom of my screen …

Then paste the following code into your “Find Box”

<div class=’post-footer-line post-footer-line-1′>

Once you find that piece of code paste this code BELOW it, once the next line.

<img src=’IMAGE URL HERE’ style=’border: none; background: transparent;’/>

Then switch over to your word document and copy the direct image url of your signature [that you copied earlier]. Paste that into your HTML where it says IMAGE URL HERE.

Do NOT erase the quotation marks.

My final piece of code looks like this…

<img src=’http://i904.photobucket.com/albums/ac241/kelimedesign/kimsig2.jpg’ style=’border: none; background: transparent;’/>

Then you can click PREVIEW and make sure everything looks okay. If it looks good, then SAVE!
Now you have a beautiful blog signature!

 ps :: I originally posted this at the SNAP! Blog.

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)