Customize the looks, style of Bullets [Unordered list, ul] in your Blogger blog using CSS [Also in any website]

Modifying the Bullets of Post body and Sidebar of Blogger

Using images on bullet using background method [explained for Blogger Post]:

Firstly we need some cool background images for your New bullets. For your ease we have uploaded a collection of 300+ bullet files. Click here to download it from box.net. Also if you want to search your own bullet icons then please go through this post to get some Free Icon websites. Ok! Now that you have selected the images to use, its time to style up your bullets. Please follow the procedure below…

• Upload the picture to some free Picture hosting site like photobucket or Tinypic [My favorite]
• Go to your Blogger.com dashboard > Layout > Edit HTML.
• Now add the following piece of CSS code before the closing ]]></b:skin> 

  .post ul { 

      list-style: none;

  }

  .post ul li {

      background: transparent url(Image URL) no-repeat scroll 0 5px;

      line-height: 140%;

      margin: 0.3em 0;

      padding: 0 0 0.8em 20px;

  }

• Obviously you need to replace Image URL with the URL of your image [Direct link]. Also play with the value of line-height and position [Note the bolded 5px value, you may need to change it to upper or lower number to make your bullets come aligned with the background images] and padding to align the text and the background image accordingly.
• Preview your Template. If you have done it in a right way then your post body should now contain these images as bullet style. Save the Template and enjoy!

Using images on bullet using list-style method [explained for Blogger Sidebar]:

The procedure is almost same as above. We need to add here the CSS codes styling up the Sidebar bullets. We can also do it in previous CSS method. But here we shall try another method. So lets have a look at the code. [Which obviously you need to add before ]]></b:skin> ]

.sidebar ul { 

  list-style: disc url(Image URL) inside;

  vertical-align: top;

  padding: 0;

  margin: 0;

}

.sidebar li {

  vertical-align: top;

  padding: 0;

  margin: 0;

}

Note that here instead of using the background attribute we are using list-style attribute. Using this will make our codes short whereas if we use the background attribute then we will be able to play with the position to align the image better.

CSS code for styling ul of General Web-site:

We can also use this code for general website. For that the simplest way is define a class name, suppose “myul” to the unordered list you want and write html codes accordingly. For that just follow these steps

• Add this piece of code before the closing </head> section of your Website

  <style>

  ul.myul { 

          list-style: none;

  }

  ul.myul li {

  background: transparent url(Image URL) no-repeat scroll 0 5px;

  line-height: 140%;

  margin: 5px 0;

  padding: 0 0 5px 20px;

  }

  </style>

• Note that here also you need to change the background position, line-height and padding in accordance to your image dimension.
• Now just add the unordered list like this where you want the style to occur
  

  <ul class="myul>

      <li>List 1</li>

      <li>List 2</li>

      <li>List 3</li>

  </ul>

• And you are done. Check out your webpage to see the effect.

Below given are some tips and tweaks which you can add on the CSS definition.

Making the bullet images change while hovering [Using pseudo class]

This can look really good, when someone hovers the mouse over the bullets and the background changes. You have should have noticed this in our Blog. Basically its done by simple pseudo CSS. Here is what you need to do.

• For Blogger [Assuming you are modifying the post bulleting with background attribute] simply add this code after the end of the codes written above

  .post ul li:hover {

      background: transparent url(Image URL) no-repeat scroll 0 5px;

  }

• Just give a different Image URL here. Also tweak the position to align it perfectly.
• Now for general website, the concept is same. We just need to define the CSS on the way we did before. Means we just need to add this before the closing </style> tag

  ul.myul li:hover {

  background: transparent url(Image URL) no-repeat scroll 0 5px;

  }

• Also keep it in mind that we can do the same with list-style attribute also. For that the code will be something similar to this

  ul.myul li:hover {

  list-style: disc url(Image URL) inside;

  }

Note that you can also add other CSS codes before the closing curly bracket “}” to make more customization. Read below to know how.

Customizing the Bullets more with CSS

Obviously we can customize the lists more using other CSS values. Explaining them one by one is difficult. Please read the code below with the comments to know how we can customize it.

ul.myul {

background: transparent url(Image URL) no-repeat scroll 0 5px;

color: blue; /*Set the color of the text */

font-size: 13px; /* Set font size */

font-weight: bold; /*Makes the font bold*/

font-style: italic; /*Makes the font italic*/

font-family: Comic Sans MS; /*Sets the font face*/

text-decoration: underline; /*underlines the text */

margin: 2px 3px 4px 5px; /* Sets the margin in top right bottom left order */

padding: 2px 3px 4px 5px; /* Sets the padding in top right bottom left order */

/*Any other CSS of your choice*/

}

If you don’t know how of generate color code refer to this post where we have discussed about many color scheme generator websites. Also you can change ul.myul with .post ul to stylize blogger post and .sidebar ul to stylize Blogger sidebar. [Note that the “.” [dot] is necessary]

Well that’s it. If you have liked this post then please consider tweeting it using the twitter badge below the post. Also if you have any queries then feel free to ask us. On the next post of this series we shall see how to modify ul, li and a HTML tags to display listed item in stacked order [Similar to the tweets on twitter widget on our blog]