Customize Bullet List Style With Image Hover Effect In Blogger

Every blogger wants to create his/her post in a unique way,that why they always try to make some different.In today's tutorial we will make some some fun with bullet list style.We will add two small rounded bullets colored in blue on green.In normal bullet will stay in blue color and on mouse hover it turns into green,this mouse hover effect attracts anyone and gives your article professional look.To add this effect you just have to put some CSS code in your template,Let's start now.

How To Customize Bullet List Style

1. Go to Blogger Dashboard > Design > Edit HTML
2. Download a copy of your template
3. Now find for below code in your template

]]></b:skin>

add below code just above/before of above code.

.post ul {
    list-style: none;
}

.post ul li {
    line-height: 1.4em;
    background: transparent  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3zSxs0k3rZtRgqTT2eop_K-czkrWZEutYZher-UrAHBL1Zr336VOINA9WgGB-gs18oELOc9pdaKLuCA4SG5m2hGwY51V7fqYdu27E-XJvvBY526rzKgSFpeNHCgzpNY3CdogM7Arahcg/s1600/blue-bullet-icon.png) no-repeat scroll 0 5px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}

.post ul li:hover {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjADBXRULcR9-XlkbbqrfPUnM3Rp3-v0-3P_yxKVuBKPM-GH-L4JJ0mvp77NYWc8O1Aj5NhdBFYbaguN3w6Div7rxXqnxzjs5516yLqqPEc0sZSUmiHEGWXR_xerJlhFLxg5GWUhFOU9VM/s1600/green-bullet-icon.png) no-repeat scroll 0px 5px;
}

Customizations

• The bullet image can be aligned horizontally with the text by increasing or decreasing the value 5px.If you are editing code then both values highlighted in yellow color should be same.
• You can replace the URL'S of image with your own images as you wish.

Save your all changes and you are done..... Hope you all will like it.