Tips & Tricks Tuesdays: adding an icon beside post title

9:00:00 PM

Hi all and welcome to Tips & Tricks Tuesdays!


Today I'm going to give a blogging tip instead of the usual sewing/quilting related tips. 

I'm going to show you how you can put a little image beside your Blogger blog post titles, like mine:
I suggest that before you attempt to make any changes to your blog, you always back up your template before edits.

1. Generate your image that you want to use. The image/icon should be relatively small and simple. I usually use Photoshop Elements or Publisher to edit and create the icon. Use online resources like Google to search for royalty free images that will suit the feel of your blog. There are great resources online for downloadable 'scrapbook' kit images, free-domain clip art, and free fonts - just use your preferred search engine (mine is Google) and search away. You can come up with some really neat stuff, something unique to you and your site.

2. Once you're happy with your image, save it (if you can) as a .png file, and then choose an online image hosting site to upload it to. I prefer flikr or photobucket myself.  You may need to resize your image; a post title icon should be no more than about 100px tall. Mine is about 80px.

3. Now it's time to add it to your site. Head over to your blog. In the new blogger interface, click:
-Template
- - Customize
This brings you in to the Blogger Template Designer.

4. Click on:
- Advanced
- - Add CSS
5. In the white box ("Add CSS here to override") you enter this code:

h3.post-title {
background:url(YOUR IMAGE URL) no-repeat left;
height: 90px;
padding-left: 110px;
padding-top: 45px;
margin-bottom: 0px;
}

Now, you'll have to copy the direct image url of your icon from your chosen hosting site and paste it in the code where it says: YOUR IMAGE URL

6. For the part of the code in blue, you'll have to play with it until it suits your icon size/type. 
Height: this is the height of your icon; if some of the icon is cut off in the live view, change the px value until the entire thing is included. So increase it by about 10px increments until it's in full view.
Padding & Margin: moves the icon and title text around; again, play with the numbers a bit until you get it perfect for your particular icon. 

The values in blue are for my specific icon, but the values should be fairly close for your blog, as well. Just make sure your icon isn't too big - if it is, go back to your hosting site, edit the image to change its size, and then save a copy of the image and re-insert the new code into the ( ) of the above html snippet I gave you.

7. When you're happy, click:
- Apply to Blog

Now, you should see your icon image beside each post title!


Now for the linky-party!
Tips & Tricks Tuesdays at Sew at Home Mummy

  1. Post a tip, trick or tutorial on your website or blog
  2. Grab a "Tips & Tricks" button from my blog in the right sidebar --> 
  3. Post said button in your tricks post, and link back to my blog
  4. At the bottom of this post, click the "link up" button and follow the directions...let the party begin!
  5. If you have a chance, pop by the other fellow blogger linker-uppers at the bottom of this post and share some love!

You Might Also Like

3 comments

  1. Bah for my typo on my linkup! thats what I get for posting early in the morning!

    love your tip, been meaning to look into this.

    ReplyDelete
  2. what a great tutorial on this. saving it so I can make one myself :)

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question. Rather email me? Reach out at sewathomemummy@gmail.com.

I like to email everyone back when they've commented - so if you're a no-reply blogger, make sure to leave your email address in your comment so I can share the love back atcha!