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.