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.
Let's get started!
Making the Post Icon
1. First you need to choose a graphic for your Post Icon.
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:
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.
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:
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: