Stylish Animated Bullet Image Hovering Effect

Animated Bullets with image hovering effect for blogger post.Here we are going to replace the default bullets available in blogger with our own image including bullet hovering. CSS plays a vital role in making website eye catching.Here is a simple tutorial to change or override the default template and blogger CSS animated bullets.

Now we will add the image for bullets and background as default and hover then in you post the bullets by default have one image and when hovering has other image.

Animated stylish bullet Hovering effect in Blogger

• Log in to blogger.
• Then click template and click proceed.
• Then search for ]]></b:skin>
• Then above it paste the below code.

.post ul li {
line-height: 1.8em;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9nRUrw7PEiPjz3Kg4imV26L0ihJdRS4YfWD1ZuRZURymgTfr6a4XF9FLkC57Ylx0rYdIlwqu2-NWnjdzmQe67rDXmiW5ZpnW2ZrdR_5n7TWkqZtjf1Jb_FOjstMZZZ-rlbJ_A-UyGHuA/s400/255.gif) no-repeat scroll 0px 4px;
 margin: 0.3em 0;
 padding: 0 0 0.8em 20px;
 }
 .post ul li:hover {
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirgrRwRVDiwRmRrtzj6gcLAlrEVopQA4g_NteYnmICO9mtpS7wHdLf6jKI8dNPBy0Lsok9FAx-E26qdYI0vPbX4m0lpPWQGZwn6k-o_wpBWgxzdfwZIoRWV3sPWfT3L1-byPUOhBjitso/s400/251.gif) no-repeat scroll 0px 4px;
 }

•  Then the first link has default image and second has hover image.
• You can replace with your own image also by default we give blue and green as in above image.

Using own image in Bullet Hoverig

• If you want use you own image then make sure the background of image is transparent.
• Then Image size should be low.
• GIF format is recommended for low size.