Tuesday, 9 July 2013

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.

image4
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

image1

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

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

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.

image2

 

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

image3

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.

 

If you like the post, take a couple of minutes to comment and share.
Your comments are most valuable and would help me come up with better posts.

Reactions:

0 comments:

Post a Comment

ABOUT ME

Founder & Author: Hi Friends, my name is Arun Kumar Choppara. I am a Software Engineer by profession and a passionate blogger. I have started blogging as a hobby and now addicted to it.
...Read More