Type in key words and search my blog here:

Loading

Monday, February 2, 2009

Scrap you Post Title Icon

I saw a cool post made by Pocket about making an icon for your post titles. I was intrigued, and set about to learn how to do it.

Step 1 - Create and upload your image
Create an image (GIF, JPG or PNG). My POST SEPARATOR is in PNG format, because I prefer the transparent background. Make sure your images are no larger than the following:

75 x 75 pixels (72 dpi)
OR 50 x 50 pixels (72 dpi)

As always, I scrap the image much larger, then resize. For this I scrapped at 1000 x 1000 to begin with. Upload your finished image to your favorite photo hosting site and get the direct link code. Save it for later.

Step 2 – Backup your blog template.
You can find directions to do that here.

Step 3 - Check your font size and boldness
You can check out how to change your post title size here.

Step 4 – Find this section of your HTML code.Go to CUSTOMIZE/LAYOUT/EDIT HTML Make sure to Expand Widgets

Look for this section of code

<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>

***Hint: The fastest way to find it is to hit the CTRL and the F (FIND OPTION) to open a search box to find what you need in your code. You can search for the expr part of the code, there are a lot and some that are similar so please check CAREFULLY.

You are going to put your code BETWEEN the <a expr:href='data:post.url'> AND the <data:post.title/> code.

Step 5 - Change your HTML code.
Paste this script between the code text listed above:

<img src="DIRECT IMAGE LINK HERE" style="border-width: 0px;" />

Click on PREVIEW, and look at your post. Do you like the Icon you've created? If so, then click SAVE, and VIEW BLOG. If not, make changes as needed. If you have any questions, please feel free to contact me.

7 comments:

  1. Another awesome post. 6 weeks ago, this html stuff would have me running for the hills, but you have really made it simple and easy. I've been so busy designing, but I have several of your recent posts I want to try!

    Cara
    SweetTomatoDesigns

    ReplyDelete
  2. thanks again Jeanette! My blogs are just getting prettier and prettier all the time!!! :)

    ReplyDelete
  3. hi jeanette
    this was another cute one to do
    did it in my blog and looks great
    thanks for the wonderfull tut
    hugs Leonie aka miss tatty
    http://tattylover.blogspot.com/

    ReplyDelete
  4. Hi, Jeanette, you have a new award on my blog. Come see and thank you again for your tips!
    hugs
    steph

    ReplyDelete
  5. I thought of something else!! What about buttons - you know for the titles on the side bar???

    Good luck!!!

    ReplyDelete
  6. thank you so much for more easy to follow instructions. I k=now have a cute icon in my post titles

    ReplyDelete

Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!

<a href="YOUR BLOG ADDRESS HERE/">YOUR BLOG NAME HERE</a>

-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

ONE SIZE TEMPLATE

ONE SIZE TEMPLATE
Blog Background Template