Bullet lists hover efects - customize blogger templates ul, ol, list style

HTML sintax of Ul or Ol list styles, is:

<li>Contents</li>

<li>Contents</li>

</ul>

or

<ul>

<li><p>Contents</p></li>

<li><p>Contents</p></li>

</ul>


CSS code , place before ]]>

Example for posting section on blogger templates:

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

.post ul li {

line-height: 1.5em;
color:#FF3208;
}

.post ul li:hover {
color:#34810D;
list-style-type: disc;
}
.post ul p { color:#44444;
line-height:1.4em; }

or



.post ol {
font: italic 1em Georgia, Times, serif;
color: #77777;
}

.post ol li {
line-height: 1.4em;
font: italic 1em Georgia, Times, serif;
color: #cc0000;
}

.post ol li:hover {
font:bold italic 1em Georgia, Times, serif;
color: #0080ff;
}

.post ol p {
font: normal 1em Arial, Helvetica, sans-serif;
color: #555555;
line-height:1.4em;
}

Example for sidebar section, just change .post into .sidebar, example below:


.sidebar ul {list-style-type: circle;
}

.sidebar ul li {

line-height: 1.5em;
color:#FF3208;
}

.sidebar ul li:hover {
color:#34810D;
list-style-type: square;
}
.sidebar ul p { color:#44444;
line-height:1.4em; }


For HTML color look here : HTML color codes

1 comments:

Web Development Company Chennai said...

I have seen your all posts, its really very informative and impressive to read..i going to bookmark your blog and read every updated article of you.

Post a Comment