Customize Bullet List Style With image ahover effect

Most People ask how to replace default bullet style with custom image in Blogger.
Today we have answer for this. This effect is really easy to apply. We only need to apply a simple code to your template. Not forget to comment.
Lets start!

• Go To, Blogger > Layout > Edit HTML
• Search For " ]]></b:skin>" (Find By  Pressing Ctrl+F)
• Copy and paste following code just above/before ]]></b:skin>

Code:

.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url
(http://3.bp.blogspot.com/_7wsQzULWIwo/SuOQQiLH43I/AAAAAAAACH4/FBUdi0H2EEo/s400/265.gif ) no-repeat scroll 0px 5px ;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}
.post ul li:hover {
background: transparent url
(http://4.bp.blogspot.com/_7wsQzULWIwo/SuOQQ5UHawI/AAAAAAAACIA/7tgVDjU40qc/s400/261.gif ) no-repeat scroll 0px 4px ;
}

• Save your template and you are
• Done!

Customization:
1. You can Replace URL and Mouse hover image URL with yours.
2. You can Change 4px to any Pixel you wish.I recommend you 4px.