Make Mouse Hover Bullet And Numbered List Style Without Images

Hello there, before we go forward I want to let you inform about our another previous post on bullet and numbered list customizing with image hover effect. Today we are going to learn how to change bullet list style using hover effect without any images.

• Traffic Increasing Tips.
• Submit Blogger Sitemap In Bing And Yahoo.

1. First log into your blogger account
2. Click on your blog title
3. Click Template from left side menu
4. Backup your template before editing
5. Click Edit HTML, Click Proceed
6. Search for the below code by pressing Ctrl+F

.post-body ul

If you do not find this above code, don't panic. Try searching this below code.

.post ul

A piece of code you will see as like something below,

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

7. Now replace this codes with the below codes.

/*-----Bullet list style (www.shinemat.com) start----*/
.post ul {
list-style-type: circle; }

.post ul li {
line-height: 1.5em;       
color:#076FE4; }

.post ul li:hover {
list-style-type: disc;
color:#F4830A; }

.post ul p {
font-family: sans-serif;
line-height:1.2em; 
color:#0F0E0E; }

/*-----Numbered list style (www.shinemat.com) start----*/
.post ol {
font-family: sans-serif;
color: #706969; }

.post ol li {
line-height: 1.2em;
font-family: sans-serif;
color: #289728; }

.post ol li:hover {
font-family: sans-serif;
font-style: italic;
font-weight: bold;
color: #0080ff; }

.post ol p {
font-family: sans-serif;
font-weight: normal;
font-style: normal;
color: #0F0E0E;
line-height:1.2em; }

8. Now, click Save Template to done.

Customization area

---

■ You can use circle, disc or square as list-style-type.

■ Change color codes as your wish. Such as: #F6D58D etc.

---

Note: Whenever you use numbered list in your post you need to modify a simple thing. Write as usual your numbered list contents in your post. When done go to your post HTML editor and find <ul> Your Numbered list looks like something...

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

Now, add <p> and </p> tag as follows,

<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. Now publish your post to feel a new twist of your ul and ol lists. If you face any problem please don't be late to ask me. With best wishes, good night. Have fun !