Visit
http://www.blartblog.com/2012/11/how-to-add-custom-bullet-points-to-your.html for a tutorial with pictures and screenshots
A fun and really easy way to add a personal touch to your blog is to replace the default bullet points with something a little more unique. The following tutorial is based on the blogger platform, however, the code will apply to any other platform using CSS.
For this tutorial I'm going to make an bullet point in the shape of a star. I will be using Adobe Illustrator to create my image but if you don't have a photo/image editing program you like to use, some free alternatives are picmonkey.com and pixlr.com.
Step 1: The first thing you're going to need to do is create your image. Now, you can create virtually create any image you'd like. You can simply use a colored circle, a little heart, or go totally crazy and use an image of Mickey Mouse's head. You want your bullet point to be noticeable but definitely not distracting
What I'm going to do now is open Illustrator and create an appropriate size art board (image size). This is very important because if you create an image thats too big you're going to end up with a gigantic bullet point and you don't want that, so below I have some standard sizes. Feel free to play around and experiment with other sizes as well. I'm going to make mine 16x16 pixels.
Step 2: Save your image. Double check it is the correct size and then save it as a .gif. This will make the background of the image transparent. A .png file will work also.
Step 3: Upload your file to your image hosting site. If you don't have one, two I suggest are photobucket.com and imageshack.com. Once you've uploaded make note of the image URL. It will look something like this:
http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/starbullet.gifStep 4: Next, you're going to insert the above URL into the following code:
.post ul li {
list-style-image:url('IMAGE URL');
}
It will look something like this:
.post ul li {
list-style-image:url('
http://i1301.photobucket.com/albums/ag113/KellyStahleyArtDesign/starbullet.gif');}
Step 5: Log into your blogger account and in the panel on the left hand side click "Template," then in the next window click on the orange "Customize" button and it will bring to to the screen in step 6.
Step 6: You're now going to see the Blogger Template Designer. All the way on the left click the bottom button "Advanced." Then scroll down all the way to the bottom of this list and click "Add CSS." Then in the white "Add custom CSS box," paste in the code we created in the above steps. Make sure to click "Apply to Blog" and then that's it! You'll now see your bullet points have changed into your new image.
Note: While you're writing a post, you will see the default bullet points but don't worry you're custom images will show up as soon as you publish the post.
;){kind=link}