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 PostIf 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:
<ul><li>Create your own list markers in Blogger</li>
<li>Create unordered lists in Blogger</li>
<li>Create bullet points in Blogger</li>
</ul>
Any text can be placed between the two <li></li> tags. Simply copy this list into a Blogger post and substitute your text for mine and you will have an unordered list.
Circular Bullet PointsCircular bullets (also known as markers or discs) are displayed in Blogger by default whenever unordered lists appear. This means that whenever the <ul></ul> tags are used in Blogger posts a leader dot or disc will appear before each line of text denoted by <li>. (Note I will discuss ordered lists <ol></ol> tags in part two of this tutorial).
An unordered list in a Blogger post using the <ul></ul> 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:
- Login to Blogger if not already logged in
- From the Dashboard go to Design >Edit HTML
- Back up your template
- Find the posts section of your CSS stylesheet which will be before ]]></b:skin> tag
- 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;
}
- 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:
- Follow steps 1-4 as per square bullets
- 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;
}
- Save the changes to your template and view a blog post to see the empty circle bullet points
How To Indent Bullet Points in BloggerThere are two ways to increase the indentation of list style markers or bullet points.
- 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;
}
- 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
- Follow steps 1-4 as per square bullets
- In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:
.post ul li {
list-style: url("http://URLaddressofImage.gif");
}
- 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.
- 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 PostsIf 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:
- Follow steps 1-4 as per square bullets
- In the CSS styling of the posts section of your Blogger template and before the </head> insert the following code:
.post ul li {
list-style: none;
}
Related ArticlesList of Blog Know How Tutorials for Blogger BlogsHow to Add CSS Styling to Blockquotes in BloggerHow to Add, Delete or Remove Blogger Image BordersHow to Align and Justify Posts in BloggerHow to Add a Divider Between Blogger PostsHow to Add or Change a Background Image in a Blogger Template
