How to Change Bullet Point Style in Blogger (Blogspot) Lists

In Part 1 of this three part series of Blogger tutorials I discuss how to change bullet point styles of lists you may want to include in Blogger posts. This first Blogger tutorial deals with unordered lists and how these can be styled using CSS in Blogger (Blogspot). The second part of these tutorials will deal with ordered lists while part 3 discusses bullet point changes you can make to your sidebar, footer and menus.

Today you will learn how to:

• change the style of bullet points in unordered lists
  
• add bullet points to unordered lists if they are absent
  
• add an image instead of a bullet to lists in your Blogger posts

This tutorial is rated easy and is designed so that even Blogger newbies can make the changes they want to their Blogger template. Changing the bullet point style involves changing the CSS styling in your Blogger template (Blogspot template). Join me as I walk you through this step by step guide. How to Add Bullet Points to a Blogger Post If you are still using the old Blogger editor you will need to add bullet points manually to any unordered lists you create in Blogger posts. If you are using the new editor the work is done for you. Either way though this is the type of code that generates unordered lists:

• Create your own list markers in Blogger
• Create unordered lists in Blogger
• Create bullet points in Blogger

Any text can be placed between the two tags. Simply copy this list into a Blogger post and substitute your text for mine and you will have an unordered list. Circular Bullet Points Circular bullets (also known as markers or discs) are displayed in Blogger by default whenever unordered lists appear. This means that whenever the tags are used in Blogger posts a leader dot or disc will appear before each line of text denoted by

. (Note I will discuss ordered lists tags in part two of this tutorial).

An unordered list in a Blogger post using the tags would appear like this:

• Change Bullet Point Style in Blogger
  
• Add Bullets to Blogger
  
• Changing the look of unordered lists in Blogger
  

We can make lots of changes to the look of these filled discs or filled circles by changing the CSS styling in Blogger. For instance we can have squares, or we can choose to have no bullet point at all. Here's how. To Add Square Bullet Points to Blogger (Blogspot) The following code will replace the filled circle bullet points with squares instead:

1. Login to Blogger if not already logged in
   
   
2. From the Dashboard go to Design >Edit HTML
   
   
3. Back up your template
   
   
4. Find the posts section of your CSS stylesheet which will be before ]]> tag
   
   
5. For the following default Blogger templates eg "Simple" add the following CSS code to the post section like this
   
   

   .post ul li {
   list-style: square;
   }

   
   
   
6. Save template and view blog post to see the circular bullet points have been replaced by square ones

To Add Circle Bullet Points to Blogger (Blogspot) To add unfilled circle list markers or bullet points to Blogger posts do the following:

1. Follow steps 1-4 as per square bullets
   
   
2. Add the following code to the posts section of the CSS stylesheet of your Blogger template by entering the following code:
   
   

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

   
   
   
3. Save the changes to your template and view a blog post to see the empty circle bullet points

How To Indent Bullet Points in Blogger There are two ways to increase the indentation of list style markers or bullet points.

1. Using the Inside or Outside Element
   The indentation of bullet points can be varied using the "inside" element. By default the list will be "outside" unless the "inside element" is used. The following code shifts the indentation of the list further to the right.
   
   

   .post ul li {
   list-style: circle inside;
   }

   
   
   
   
2. Custom Indentation CSS Styling
   It is also possible to add custom indentation styling to lists. For instance here I have added a 2.5em indent using the following code to the circles example:
   
   

   .post ul li {
   list-style: circle;
   margin-left: 2.5em;
   }

   
   

How To Replace Bullet Points with an Image in Blogger (Blogspot) Sometimes you may prefer to have an image list marker or icon instead of a bullet point. You will need to host your image somewhere such as a free image hosting service eg Flickr or Photo Bucket. Follow the steps below to replace bullet points in your Blogger posts with an image

1. Follow steps 1-4 as per square bullets
   
   
2. In the CSS styling of the posts section of your Blogger template and before the insert the following code:
   
   

   .post ul li {
   list-style: url("http://URLaddressofImage.gif");
   }

   
   
   
3. Replace URLaddressofImage with the URL address of the image you have uploaded to an image hosting service. Note in most cases the file will have a .gif extension. If the extension is anything other than .gif you will need to change this too.
   
   
   
4. Save the changes to your Blogger template and navigate to a post page to see your image list marker installed

How to Remove the Bullet Points from Blogger Posts If you are going for a minimalist look you may prefer to have no bullet points in the lists in your Blogger posts. In this case:

1. Follow steps 1-4 as per square bullets
   
   
2. In the CSS styling of the posts section of your Blogger template and before the insert the following code:
   
   

   .post ul li {
   list-style: none;
   }

   
   

Random Posts...!!!

• 

  How to Add a Twitter Profile Widget to Blogger

  15/07/2012 - 0 Comments

  If you use Twitter then you are going to want to let your Blogger readers know about it. One effective way to…
• 

  Fix Favicon Visibility in Internet Explorer For Blogger

  08/06/2012 - 1 Comments

  Favicon is really a 16 X 16 small graphic icon that appears within your browser address bar beside a web…
• 

  Add a Customized Three Column Footer Widget In Blogger

  21/09/2013 - 0 Comments

  You might have seen a three column widget at the bottom section of many commercial and professional blogs.…
• 

  How to Remove or Change the Blog Title Border in Blogger (Blogspot)

  29/06/2012 - 1 Comments

  In this Blogger tutorial I discuss how to change the blog title border color or remove the border in a…
• 

  Using Accessories to Further Enjoy Your Smart Phone

  25/10/2013 - 0 Comments

  What you are visualizing about new launched Samsung Focus smart phone? This phone has been loaded with…
• 

  The way to produce a Competitive Advantage for your Blog

  10/06/2012 - 0 Comments

  Every single blog should devote itself to produce a sustainable edge so that you can produce a competitive…
• 

  How To Publish Your Posts To Facebook Page Automatically

  24/06/2012 - 0 Comments

  Facebook is the best social networking site which is widely used in the world. Every blogger give first…
• 

  10 Ways to Make Money Online in 2013

  06/09/2013 - 1 Comments

  hareIn Today’s cyber world there are many ways to earn money online. People are making hundreds of dollors…

Posted in: blogger,Blogspot,Bullet,Change,Lists,Point,Style