Amazing Blogger Tricks

There are default bullet styles available on blogger which can be applied to the blog posts. And if you wish to make them more attractive with some images, you can have them changed to any specific or customized images as I explained in my previous post on “Customizing Bullet list with images”. If you wish to make it more customized with hover effect to the images used for bullet style, then follow this post to get it added to your blog.

My previous post on bullet list styles explains the process of adding/replacing the usual bullet list style with images. In this post I will explain the process of customizing the bullet list styles and adding hover effect to the images used for bullet list just like the one in the below image.

1. Go to: Blogger -> Layout -> Edit HTML

2. Search for the code ]]></b:skin>

3. Add the below code just above ]]></b:skin>

.post ul {list-style:none; } .post ul li { line-height: 1.4em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeHkyv0y5qXqCK72F_3xaN-x0R_0MwJjSUkf3eIOkHu-zPew8EKh_t9nNVJMySD3tSQEDK4_sVHERVgeI2wG8qPC0SfPb7q05PZX5c2BXjqB-9rTIphhtnipDW9jNc-mYf_ZARrHMar2zt/s1600/bullet11.gif) no-repeat scroll 0px 4px; margin: 0.3em 0; padding: 0 0 0.8em 40px; } .post ul li:hover { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkQlGZ05mlkUa9Sk691-j-WNukzrlbvxpw1S_T73wuVqhxatYpsvfUlcyys9S1bTeR3zCCQOLYlAPzk0x0SbcofSKMzbWjRn3YkhLxAs07NmZfmdFItKPmwaec_y-c5UXbpLY3Xg8vhYJZ/s1600/bullet12.gif) no-repeat scroll 0px 4px; }

Here, replace the first image URL with the actual URL of the image to be displayed when the cursor is not placed on the bullet point of the list. And replace the second image URL with the actual URL of the image to be displayed when the cursor is placed on the bullet point of the list before using the above code.

4. Save Template and view blog to see the changes to all the bullet lists items on the blog.

That’s it guys … We have successfully added the code to make the list bullet style with hover effect. Thumbs up

From here onwards, the bullet list style will be displayed as customized.

Island with a palm tree NOTE: If the Bullet image extends beyond the start of the bullet content, then we need to tweak the code added to the blogger template HTML to correct the bullet content alignment. Increase or decrease the value highlighted in red to change the bullet content alignment.
margin: 0.3em 0;
padding: 0 0 0.8em 40px;
I have tested this on my blog and should work.