1. Make your icon. It needs to be a png. file, 32 x 32 pixels (or close to that). Then upload it to photobucket or some other photo hosting site. Get the direct link to the picture.
2. Go to Blogger >Layout>HTML. Okay now hit Ctrl+F on your keyboard. It will bring up a search bar in the bottom left hand corner. In that search bar put in .post h3 { Here is what you should see
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
Highlight everything UNDER the .post h3 { and paste this code:
background:url(YOUR IMAGE DIRECT LINK URL) no-repeat;
margin:.25em 0 0;
padding:0 0 10px 36px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
margin:.25em 0 0;
padding:0 0 10px 36px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
Where it says YOUR IMAGE DIRECT LINK URL delete that and add in your direct link from photobucket. Be careful not to erase the two ( ). You have to have those make sure your link goes in between them. Now preview your template and it should work. Then save your template.
Thanks for the tip! It's a different code than I used. That would explain why mine only half-worked.
ReplyDeleteThanks for the great tutorials here! I think it's fun to change little things like this on my blog. It's makes it so much more quaint :)
ReplyDelete