How to use Bullets in List.

Commonly there are two type of list they are.

1. Ordered list = Order list is the list with numbers.
2. Unordered list = Unordered list is the bulleted list.

Today we are learning how to  add bullets in list and style them.

Ordered list

For ordered list we use  <ol> tag and for unordered list we use <ul> tag.

The ordered list looks like this in HTML source

<ol>
<li>Ordered list 1</ol>
<li>Ordered list 2</li>
<li>Ordered list 3</li>
</ol>

In browser the it will look like this

1. Ordered List 1
2. Ordered List 2
3. Ordered List 3

Unordered List

In HTML source Unordered list looks like this

<ul>
<li> Unordered list 1</li>
<li>Unordered List 2</li>
<li> Unordered List 3</li>
</ul>

In Browser it looks like this

• Unordered list 1
• Unordered List 2
• Unordered List 3

Now you have clearly distinguish what is ordered list and what is unordered list.Today we are learning how to use Bulleted list.

How to I Apply the Bullets in List.

To apply the bullets in list  just make a simple list then click on bulleted icon.

Types of Bullets.

By default there are three types of Bullets they are

Value	Bullet
1.square	▪
2.Disc	●
3.Circle	◦

Using Bullets in Sidebar.

In Sidebar if you use Bullets too the bullet will not be shown to show the bullets in form of square,disc or circle we need to edit some code in Template HTMl.You may have acess but you may want to use another bullets then Try this.

1. Go to Blogger.com
2. Click on Design or Template
3. Click on Edit HTML
4. Find this line  .sidebar ul
5. You may see the coding like this (In Default)

   .sidebar ul {
     list-style:none;
     margin:0 0 0;
     padding:0 0 0;
   }

6. You can see that none of bullet is used.In Line 2 if you want to use bullets than replace none with circle,square or disc.
7. Some of you even don’t see in template then if so then do this.
8. Go to Template Designer
9. Click on advanced and go to add CSS then add following codes

   ul {
   margin: 0px;
   padding: 5px 0px 0px 15px;
   list-style-type: square
   }

10. It works in every template so cheers.

Using bullets as image.

1. To use the bullets as image just you need to edit list-style-type like this

   ul {
   margin: 0px;
   padding: 5px 0px 0px 15px;
   list-style-image: url('YourBulletUrl')
   }

2. In Line 4 replace YourBulletUrl with direct link of Bullet Image.

If you want to use bullet for specific page like post then just re add CSS replacing ul with .post ul

Admin of Blogger Rounder
Shirshak is the Administrator of the Blogger Rounder who thinks he will die next to Blogger. He is Completely devoted to Blogger and thinks Web Designing will makes is career.You contact using contact form from navigation tab to him.You can find him in Twitter.

Subscribe for free
Thanks for visiting Blogger Rounder.We can subscribe to Blogger Rounder'^s by RSS feed or email updates.