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.
<ul style="text-align: left;">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
5. Now add the bullet point image class to the list items as shown below.
<ul class="imglist" style="text-align: left;">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
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.
Example
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.
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
<ul style="text-align: left;">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
5. Now add the bullet point image class to the list items as shown below.
<ul class="imglist" style="text-align: left;">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
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.
Example
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.
0 comments:
Post a Comment