Saturday, 20 April 2013

How to Add - Images to bullet points?

Posted by Arun Kumar Choppara On 09:17 | No comments
When we are writing a post on a blog or website, we often come across a list of items we usually keep them as a list with bullet points.

The bullets points will be displayed as "dot" by default. But it would look great if we can add the images in place of "dot" for the list of items we mentioned on blogger posts.

Let us see the process of adding images to bullet points.

1. Copy the CSS code for the bullet point image that we want to use from website:

Replace "IMAGE-URL-HERE" with the actual image URL that we want to use in bullet points.

We have few Ready to use codes.

Green tick

Yellow tick

Maroon arrow bullet

Flower bullet

2. Go to: Dashboard -> Layout -> Template Designer -> Advanced -> Add CSS -> Paste the copied CSS code.

Click Apply to blog

Now we have added a class for the bullet point image to blog template. We can use the class in all the instances where we need it for list items.

3.Now create a new post with a list of items with bullet points as shown below.
  • Item1
  • Item2
  • Item3
  • Item4
4. Then shift to HTML view of the post content and the code for the list of items looks like the one below.

<ul style="text-align: left;">

5. Now add the bullet point image class to the list items as shown below.

<ul class="imglist" style="text-align: left;">

6.Update or publish the the post and View blog to see the changes.

Now the list of items to which the class is added should have the bullet image displayed.


List of items before adding bullet point image

List of items before adding bullet point image

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.


Post a Comment


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