Customize Bullet Style (Blogger)

Bullets are used to show important lines of story in brief and strong way.  Bullets are the parts of unorderd and ordered list. Ordered bullet list means numbering list and square and circle and custom image are the part of un ordered bullet list. Here, find out how to add bullet within post area in few simple steps. 

---

Add Bullets With No Image-

---

1. Log in Blogger Dashboard.
2. Design»Edit HTML»Expand Widget Templates.
3. In template Search out code ]]></b:skin>
4. Just before ]]></b:skin>  paste codes-
For Square Bullet List-

.post ul li {list-style: square;}

For Circle Bullet List-

.post ul li {list-style: circle;}

To fix custom margin, use given codes-

.post ul li {list-style: circle;
margin-left:1px;
margin-top:2px;
margin-right:1px;
margin-bottom:0px}

---

Add Custom Bullet List with Image

---

As above, paste the following codes just above ]]></b:skin>

.post ul { list-style: none;}
.post ul li {background: transparent url(Image URL) no-repeat scroll 0;
 line-height: 145%;
margin-left:1px;
margin-top:2px;
margin-right:1px;
margin-bottom:0px;
padding-left:1px;
padding-top:1px;
padding-right:3px;
padding-bottom:0px;}

In above codes replace  Image URL  with the direct link of your desired image. Adjust padding and margin according blog's layout. You can upload your bullet image at some free image hosting sites such as Photobucket or so on and copy the direct link, place it in above given codes. Take a preview and save your template to finish the entire process.

---

How to Use Bullet List in Post ?

---

For those who are still using blogger old post editor, add manually given HTML codes to show bullets list in post. Open post area in Edit Html mode and trace out the place where you want to show bullet list and add given codes-

<ul><li>Your Desired Text </li></ul>

Note:- Replace Your Desired Text  with your desired text. To show more lines under bullet list use opening tag <li> and closing tag </li>. Remember that <ul> and </ul> should not repeated. I want to make it clear more, for example you want to show five lines under bullet list, the codes goes like given below:-

<ul><li>Your Desired Text Lin 1</li><li>Your Desired Text Lin 2</li><li>Your Desired Text Lin 3</li><li>Your Desired Text Lin 4</li><li>Your Desired Text Lin 5</li></ul>

Notice that in above codes the opening tag of under list <ul> and closing tag </ul> are not repeated every time. Desired Text can be place between <li> and </li>. <li> is the opening tag of list and </li> is closing tag.

In Blogger New post Editor, You can use a button to show bullets, just near numbering button. 

---

How To show Linked Text under Bullet ?

---

If you want to put linked text under bullet list simply use this one-

<ul><li><a href="Your Target Link Address" target="_blank">Desired Text</a></li></ul>

as explained above, for more lines put text between <li> and </li>.

---

How To Add bullets in Post area without modifying template ?

---

Enter in HTML Section of post, just near compose and trace out the place where you want to add bullet list and paste the given HTML codes-

<ol type="A">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ol>

This results-

1. Line 1
2. Line 2
3. Line 3
4. Line 4
5. Line 5

You can replace "A" with a , i , I. 

More Examples:-

<ol type="a">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ol>

This results-

1. Line 1
2. Line 2
3. Line 3
4. Line 4
5. Line 5

<ol type="i">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ol>

This results-

1. Line 1
2. Line 2
3. Line 3
4. Line 4
5. Line 5

<ol type="I">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ol>

This results-

1. Line 1
2. Line 2
3. Line 3
4. Line 4
5. Line 5

To Show Un Ordered bullet list, like ordered list, enter in Edit HTML section of post area (near compose) and paste given codes-

<ul type="circle">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ol>

This results-

• Line 1
• Line 2
• Line 3
• Line 4
• Line 5

You can use circles and square in bullets, for square use this one-

<ul type="square">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
<li>Line 5</li>
</ol>

This results-

• Line 1
• Line 2
• Line 3
• Line 4
• Line 5

I hope that this information will help you to customize bullet list. If you have any question please ask to free. To know more about HTML Tags visit here for ready reference. 

Baca juga