Customize Bullet List Style With Image Hover Effect In Blogger - Helper Blogger

Blogger Widgets | Templates | Tutorials


Thursday, 3 May 2012

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


add below code just above/before of above code.

.post ul {
    list-style: none;

.post ul li {
    line-height: 1.4em;
    background: transparent  url( no-repeat scroll 0 5px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;

.post ul li:hover {
    background: transparent url( no-repeat scroll 0px 5px;


  • 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.


    Cheap nike shox nz
    nike shox oz shoes
    cheap nike shox r3
    cheap nike shox r4
    Cheap nike shox r5



If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM