How To Customize Bullet And Numbered List In Blogger?

26 March, Today is our Independence Day ( স্বাধীনতা দিবস ) in Bangladesh. On late 26 March, 1971 we got freedom country and life from Pakistan's misgovern. We are remembering again our bold freedom fighters with deferential respect and love from core of our hearts.

---

Eye catching design is a dream of every webmaster and blogger. It’s really essential to give concentrate on every part of your blog. Recently I have noticed on my posts bullet and number list. I always want to keep my posts very unique and beautiful. Did you observe that post’s bullet and number list styles are not looking enough beautiful? This is very important part for a good content. The Number list (ol) and Bullet list (ul) can change your posts entire look. Generally I use it for interlinking of my posts. Today we are going to learn how to decorate Number list and Bullet list style with mouse hover effect in blogger blog with the help of CSS code.

Read our another post on:

• Customizing Bullet and Numbered list style without images
• Customize Blogger's Official Popular Posts Widget.
• How To Customize Blogger's Label Widget?

This tutorial has two individual parts. These are Bullet list style and Number list style. I have tried to make this tutorial very easy for you and you just need to paste a simple piece of code in your template and then both styles will be working.

• How To Customize Feedburner Buzzboost Widget?

---

Move your mouse on below texts to see a live demo.

Bullet List Style: ▼

• I love ShineMat.com
• Its a really good blog.

Numbered List Style: ▼

1. I want to be a good blogger.
2. How to setup an online business?

---

How to customize Bullet list and Numbered list?

1. Log into your blogger account

2. Click on your blog title.

3. Click Template from left side menu.
Backup your template before editing.

4. Click Edit HTML, Click Proceed.

5. Search for the below code by pressing Ctrl+F.

.post-body ul

If you do not find this above code try searching  this below code,

.post ul

You will see your codes looks like something below…

.post-body ul,ol {margin:0; padding:0 0 0 60px}
.post-body li { }

7. Now replace this code with the below code.

/*-----Bullet and number list (www.shinemat.com) style CSS code start----*/
.post ol {}
.post ol li {line-height: 1.6em; margin: 0 22px; padding: 0 0 0px 0px; color: #077423; }
.post ol li:hover {line-height: 1.6em; margin: 0 22px; padding: 0 0 0px 0px;  font-weight: bold; color: #A55406; }
.post ol p {line-height: 1.6em; margin: 0 0px; padding: 0 0 11px 0px;  font-weight: normal; color: #1C1C19; }

.post ul {list-style:none}
.post ul li {line-height: 1.6em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY28H7IcU58XUZyrQSh_MsMW7ZhxwixdOVGQZjw0wbeSCqMB7FH9rGjd3iXALss8DNjimm_StRczwN-bi9EzCWWIYO2RlT8MpQBQwLRtMpRHDjrr3TluMDVNFubmvylMcxnLZrCWuCE6U/s1600/shinemat-bullet-black-pin.gif) no-repeat scroll 0px 2px; margin: 0 16px; padding: 0 0 10px 22px; }
.post ul li:hover {line-height: 1.6em; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisrdld7pBlGSp3ES4CE-G1_9JDUTdjZsEpPKFPydJFXkoba_vVsvadSDug8nHutxH52hMhaAGExhLGvf2vs5Rj6vJq9bQbWvfBBVbCypSpvBA4l_aheSIhtGqw2SF2R_idZLGW2B3F8qQ/s1600/shinemat-bullet-red-pin.gif) no-repeat scroll 0px 2px; margin: 0 16px; padding: 0 0 10px 22px; }
/*-----Bullet and number list (www.shinemat.com) style CSS code end----*/

8. Click Save Template and you are all done.

Now whenever you create a numbered list in your post you have to make change a small thing.
Once you have added numbered list in your post switch to HTML mode and find <ul>. You will see your code looks something as...

<ol>
<li>YOUR CONTENT 1</li>
<li>YOUR CONTENT 2</li>
<li>YOUR CONTENT 3</li>
</ol>

Now you just need to add <p> after <li> and </p> before </li>
Replace all of them as they many time as they show.
Finally your code will appear as like below :

<ol>
<li><p>YOUR CONTENT 1</p></li>
<li><p>YOUR CONTENT 2</p></li>
<li><p>YOUR CONTENT 3</p></li>
</ol>

That's all. No need to change this thing in Bullet list. Now publish your article to see your new magic touch in bullet and numbered list.