April 20, 2012

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!

25 comments:

  1. Thank you for the tutorial!I'm gonna try it!

    Lusine
    Enjoy Teaching English

    ReplyDelete
  2. Tried but i couldn't get it to work for me :( but thanks anyway x

    ReplyDelete
  3. This is wonderfully creative :) I'll be trying it today!

    Thanks girl!

    Miss Katie K
    Belle De Jour

    ReplyDelete
  4. I've tried but its not working.. I wonder the direct link is useable here..

    ReplyDelete
    Replies
    1. Are you using the simple template?

      Delete
  5. Thank you so much for sharing all these great tutorials!
    Will be trying them out.

    ReplyDelete
  6. Thanks for sharing this! I added a little birdie to my blog. It worked perfectly, you just had to type something in the code (even just a space) and then delete it back out. It was like blogger didn't "notice" it or something. Weird but it worked! I added a link to this tutorial on my blog.

    Megan
    I Teach. What's Your Super Power?

    ReplyDelete
  7. I am not sure, I am using wordpress, the direction you gave is not even listed in the dashboard. Hmm..it doesn't work for me. I syour tutorial is for different type of blog? not for wordpress user? help me dani :(

    ReplyDelete
    Replies
    1. Sorry, but these tutorials only work for Blogger, not WordPress.

      Delete
  8. This is so helpful! Thanks so much. It worked great on my blog. I'm using the Travel template though. :D

    ReplyDelete
  9. Thanks so much! I tried it with a picture I made and it worked. I was so excited to see my little hibiscus show up that I cheered which gave my husband a reason to laugh.

    I'm your newest follower.

    Thanks,
    Mercedes
    Surfing to Success

    ReplyDelete
  10. This was such a helpful tutorial! Thank you so much! I pinned you on my board "blog help". Thanks again!
    Marianne
    teachtobehappy.blogspot.com

    ReplyDelete
  11. Love your tutorials, Dani! Thank you :)

    ReplyDelete
  12. Your tutorials are awesome, Dani! Thank you!

    ReplyDelete
  13. Hi Dani,
    This works in Google Chrome but when I open my blog in IE the image doesnot show up. Can you help?
    Thanks,
    Deepti.

    ReplyDelete
    Replies
    1. Do you have an old version of IE? IE is the trickiest browser to work with for designs. I would try to update it first and see if it works.

      Delete
    2. What is the url for your blog? Can I take a look? Did you use the Simple Template?

      Delete
  14. Yes I used the simple template. The url of my blog is bakingyummiees.blogspot.in.

    ReplyDelete
  15. thanks again and again, your tutorials are fabulous! I have your button on my blog :)

    ReplyDelete
  16. It worked!!! Yay!! I have to give mad props to all you Bloggers who are willing to share all your secrets!!! I have learned so so much and been able to customize all my blog design all by myself... and let's just say I am totally HTML challenged...

    I have been looking all over for tutorials on how to customize within my posts (much like this tut) but I'd like to add the date with graphic behind it next to my post titles and I'd like to customize how the post titles themselves show on every post. I'd also like to change the font in all my posts at once (and cannot figure out how to do it within the Simple Template on Blogger)... do you have any of these tutorials?

    Thanks again!!!

    ReplyDelete
  17. Hello I have been using your tutorials on how to create my own template....I have been trying for 2 days to get the post title to work....I cannot get it to work...I have also tried googling other tutorials with no luck...yes I am using the simple template...is there anyway I can get your help PLEASE here is my blog link http://bonniesbloggin.blogspot.com/

    ReplyDelete
  18. I love your tutorials, and have customised my entire blog. Great website!

    ReplyDelete

Thank you so much for leaving a comment! I would love to answer everyone's questions, but I am a busy mama. I will try my best, but technical questions that require me to study your blog's html are very time consuming for me. I may not be able to answer all of these comments. If you are a reader that knows the answer to a question, please help your fellow readers by offering your advice.