Custom Bullets in Blogger
Look for the section defining CSS post attributes (the part of your template that starts /* Posts
----------------------------------------------- */)
Add this code (I added it at the bottom of the section, but you can do it wherever):
.post ul {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
.post li {
background: url(http://www.locationofbulletimage) left top no-repeat;
padding-left: 15px;
margin-bottom: 10px;
}
The parts in green are the parts you will change to customize the look. You will need to store the image you want to use as your bullet online somewhere, and put the URL in the background tag. The padding-left tag tells the browser how far to the left to move the text, so it's not overlapping the bullet.
To apply the changes to the entire page (not just the posts) or to use it on a regular page, put the code in your header and leave out the .post before the UL and LI tags. Here's a page with instructions for that.
2 Comments:
thanks for posting this, i'm so programming challenged... i still have to figure out a place to store images.
If you need help with it, drop me a line. I'm just an e-mail away (address in my profile).
Post a Comment
<< Purple Puzzle Place Home