Add to blogger :Bullets With Image hover effect

This is a simple tutorial to learn to ADD bullets images to your blogger which change with while you place mouse on it.The image beside shows hovering effect .IF you are looking for free bullets icons or graphics for your blog you can check my article Best places to download free bullets .

Adding Bullets to Post Area

---

• Login to your blogger
• Click on Layout tab >> Click Edit HTML
• Use your browser search (Cntrl + F) to find .post ul li or some thing like this might be different in different templates.

Copy

background:transparent url(http://i47.tinypic.com/deppy0.jpg) no-repeat scroll 0 4px;

and add in your .post ul li(in between curly brackets { and }) so that your code becomes

.post ul li {
line-height:1.4em;

background:transparent url(http://i47.tinypic.com/deppy0.jpg) no-repeat scroll 0 4px;

margin:0.3em 0;
padding:0 0 0.8em 20px;
}

This is not yet done ,if you save your template you have successfully added image as bullet in your template but it will not change when you take your mouse to your lists.
For that you have to add an another image generally of same style but with different color like i have done first green then blue.For doing that copy below part - and paste it just after .post ul li part

background:transparent url(http://i46.tinypic.com/330u3kp.jpg) no-repeat scroll 0 4px;

.post ul li:hover {

background:transparent url(http://i46.tinypic.com/330u3kp.jpg) no-repeat scroll 0 4px;

}

So now your Final code becomes-

.post ul li {
line-height:1.4em;

background:transparent url(http://i47.tinypic.com/deppy0.jpg) no-repeat scroll 0 4px;

margin:0.3em 0;
padding:0 0 0.8em 20px;
}
.post ul li:hover {

background:transparent url(http://i46.tinypic.com/330u3kp.jpg) no-repeat scroll 0 4px;

}

---

Note : If your theme does not have any thing like .post ul li   or   .post ul li:hover  in that case search for ]]></b:skin> and paste full code above it.

---

Adding Bullets to Sidebar

---

Adding bullets to sidebar is similar to adding it in posts area just add

background:transparent url(http://i47.tinypic.com/deppy0.jpg) no-repeat scroll 0 4px;

in your sidebar wrapper code if your sidebar already has an image you just need to replace the image with this http://i47.tinypic.com/deppy0.jpg


.sidebar ul li {
float:left;
list-style-type:none;
padding-left:15px;
background:transparent url(http://i47.tinypic.com/deppy0.jpg) no-repeat scroll 0 4px;
margin:0 0 5px;
}
.sidebar ul li:hover {
background:transparent url(http://i46.tinypic.com/330u3kp.jpg) no-repeat scroll 0 4px;
}

---

Note : If your sidebar does not have any thing like .sidebar ul li:hover   you have to add one for your sidebar.
Note :Dont just copy paste blindly it will not work

---