Customise Blogger Lists With CSS

How To Modify List in Blogger-

Types Of Lists In Blogger-

I think everybody knows what is list ? Lists are generally of type one is ordered list and another is unordered list. Blogger post editor have both of them.

The default appearance of both the lists is not according to the taste of readers as shown in figure.

1. Login to Blogger Dashboard.
2. Go to Design / Edit HTML.
3. Click "Expand Widget Templates".
4. Download the full template before making any changes in it (Learn More).

How To Modify Unordered List In Blogger:

1. Find following piece of code in blogger template.

]]></b:skin>

2. To modify the circle of unordered list, which is at starting point, paste any one of the following code just above the ]]></b:skin>.

/* Code On http://internetricks4u.blogspot.com/

/* To change circle with rectangle */
.post ul li
 {
 list-style-type:square;
 }

/* Code On http://internetricks4u.blogspot.com/

/* To change circle with with hollow circle */
.post ul li
 {
 list-style-type:circle;
 }

3. To change the bullet of unordered list with the image just paste the following code above ]]></b:skin>.

/*Code On http://internetricks4u.blogspot.com/ */

.post ul
{
list-style-type:none;

}

.post ul li
{
background-image:url('Image Url');
background-repeat:no-repeat;
background-position:0px 7px;
padding-left:25px;
}

Note:- Make Following Modification

• Replace Image Url with the URL of the image.
• If image and text of list not coincide on a horizontal line then adjust the value of 7px.
• The dimension of image used should not be greater than 16 * 16.

How To Modify Ordered List

Ordered list are much easier to customise in relative to unordered list. In ordered list, you can only customise the arranging order of list which is pretty easier.

Have you seen the result ? We can start ordered list with large number of arranging pattern.The corresponding CSS code is given below.

/*Code On http://internetricks4u.blogspot.com/ */
.post ol
{

  list-style-type:upper-roman|upper-latin|lower-roman|lower-latin|lower-greek|lower-alpha;

}

For Example: If you are interested to use upper roman then the corresponding code will be.

/*Code On http://internetricks4u.blogspot.com/ */
.post ol
{

  list-style-type:upper-roman;

}

Categories: Blogger , Tutorial