How to Add a Post Icon (Simple Template)

Customizing the Simple Template - Part 4

Have you ever seen those cute little icons next to the title of each post? I have made several for my custom design customers and love them. They are just one more simple feature to draw attention to your blog without over doing it.

Making the actual post icon is very easy. And if you use the Blogger Simple template, adding the icon to your blog is even easier. You don't have to worry at all about editing the HTML and messing up your blog. You won't go anywhere near it in this tutorial.

Follow Part 1 of my Simple Template Tutorials to set your template to the Simple template.

Let's get started!

Making the Post Icon
1. First you need to choose a graphic for your Post Icon.
This part is so easy if you use a graphic from a digital scrapbook kit or any other similar graphics. Just make sure that you check with the designer of the graphic before using it on your blog. Some designers have very strict terms of use. You can look at the list of designers on my sidebar, but check their terms of use before using their images. I have purchased licenses for some and have agreed to specific terms for all of them.

I am going to use an image from Katie Castillo at Just So Scrappy.

2. Next re-size your image to fit next to your post title.
To use this as my post icon, I just need to shrink it down. The height of your image needs to be around 40-45 pixels. If you use Photoshop or Pixlr, click "Image" from the main menu at the top. Then choose "image size" and then re-size the image so that it is about 40-45pixels tall. Make sure you choose an image that is close to square. (I just think they look better when they are close to the same height and width.)

When I re-size my image, it looks like this:

 

It's pretty small, but it will be just the right size for your Post Titles.

Adding the Icon to Your Blog

  1. When you want to place images on your blog, other than in your posts, you must upload them to a web hosting service of your own or a photo hosting site like Photobucket. You can create a free account to upload your images. However, if you use this site for a lot of web images and have a lot of traffic to your blog, you may need to upgrade to a Pro Account or look into another web hosting service.

If you choose to use Photobucket, you need to login to your account and click the green Upload button. Click the green button "Select photos and videos" and Browse to find your png file. When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

A window will pop-up. Click in the box that says "Direct link". This will copy the link code so that you can paste it in the next step.

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until a list of options appears below the image. Click the code next to "Direct Link". Clicking this automatically copies the link for you.)

2. Now, login to your blog and go to the Template Designer.
(If you are using the old Blogger Interface, click "Design" and then "Template Designer" under the Design tab.
If you are using the new Blogger Interface, click "Template" from the drop-down menu found by clicking this arrow:

Once you are on the Template page, click "Customize". This will bring you to the "Template Designer".)

3. In the Template Designer, click "Advanced" from the menu on the left.
When the second column appears, scroll down to the bottom and click "Add CSS"

4. In the white box, enter the following code:

h3.post-title {

background:url(DIRECT LINK) no-repeat left;

height: 45px;

padding-left: 50px;

padding-top: 15px;

margin-bottom: -10px;

}

You will need to replace "DIRECT LINK" with the link you copied for your image from Photobucket.

The "height" will depend on the height of your image. Adjust this as necessary.

The "padding-left" is how far the post title is from the left edge. If you leave this at 0, then your title will sit on top of your post icon. This distance will depend on the width of your post icon.

The "padding-top" can be used to adjust the vertical position of the post title. If you leave this at 0, your post title may sit too high for your post icon. If you make it 15px as you see here, it will push it down so that the title is centered with your post icon. You can adjust this as needed.

The "margin-bottom" adjusts the distance between the post title and the post text. If you leave it at 0, it will have a bit of white space. A positive distance, like  "10px" would increase this distance. I wanted to close the gap and so I used a negative number "-10px". You can adjust this to whatever works for your blog and your tastes.

It is easy to preview your changes in the Template Designer, so don't be afraid to change the numbers and see how it changes the picture. Once you like what you see, click "Apply to Blog" and there you have it - a custom Post Icon!

Let me know how this works for you. I'd love to see your custom designs!