How to Add an Image Next to the Title in Blogger

Well it's been a while since I've posted here. I have been so busy designing and making new clip art, getting ready for back to school, and doing lots of babysitting for my daughter. The avatars have become super popular and drawing them is really a lot of fun!! I've been able to incorporate some of my own art into the blog designs which is also fun for me! Here are two new designs I completed in July.

Aileen wanted a fun monster theme and I just love how this turned out! It is so bright and fun! I love the colors she wanted in her design.

On the Koala Kinders blog I created the backgrounds as we could not find the exact color scheme that Janet wanted for her blog. I also drew all of the artwork in her topper making it a true 'one of a kind'. I love how it turned out

How to Add an Image Next to Each Post Title

Do you love those fun little images next to each post title? I think they are really cute. They are very easy to add in Blogger blogs.

1. Upload you image online. (Photo 1) I use photobucket to store my images onlne.



(Photo 1)

2. The next step is to resize your image. You will need to resize the image to no more than 50 for the height. Click on the edit button in Photobucket and then resize. A square image works best but you can play with the numbers a bit in the code to make a rectangular image work. Be sure to save your new image. (Photo 2)

(Photo 2)

3. Now you will need the 'direct code'. It is found on the upper right side of the screen. Copy this code. (Photo 3)

(Photo 3)

4. Now you will need to paste the image into this code.

.post h3 {  background: url(paste your image code here) no-repeat top left;  padding: 0px 5px 0 60px;  line-height: 2em;  font-size:20px;  margin:10px 0;  font-weight:bold; }

5. Open your Blogger to the Template.  Select Advanced and then 'Add CSS' (it's the last choice at the bottom).  Paste the  entire code into the box. You should now have your image next to every Post Title. If it worked select 'Apply". If it isn't exactly right try increasing the numbers in the code by 10, it will slightly change the placement of your image file. When you are happy with the image placement click save. (Photo 4)

(Photo 4)

Hope these directions work for you. Let me know if you need help!!!