Using Bullets In A List


You see the picture of bullets on the left? Those are not the bullets I'll be blogging about this time, well maybe next time hehe. This time I'm going to write about the bullet as in bulleted list. Yeah, bulleted list bullets can attract people's attention too, but not as deadly. Posts that contain bulleted lists in your posts will definitely help you get the message across to your readers more easily. So here it goes,

Applying bullets in a post

Putting bullets in a post is easy. Just position the cursor at the line and click the Bulleted List icon. Blogger blog post editor will automatically insert a bullet in front of the line. If you use another blog editor, no worries, yours most probably comes with Bulleted List and Numbered List icons too.

Applying bullets in sidebars

Putting bullets in a sidebar is not as straightforward, but not difficult either. You just need to do some coding in CSS (Cascading Style Sheet).
Go to Dashboard > Design > Edit HTML and use Ctrl+F to search for “sidebar ul” element (ul stands for unordered list). You should find something like this:

.sidebar ul {
margin: 0px;
padding: 5px 0px 0px 15px;
list-style-type: square
}

In line 4, that’s the code for bullet, it’s called list-style-type property, withsquare as value. To change bullet type, you change the value.

Three types of bullets

There are 3 bullet choices you have:
  1. For value “square” the bullet is 
  2. For value “disc” the bullet is 
  3. For value “circle” the bullet is 
Not that many bullets to choose from isn’t it. Well good news, you can also use image as a bullet.

Using a image for a bullet

Here’s how, instead of using list-style-type property, you can use list-style-image as shown below:
.sidebar ul {
margin: 0px;
padding: 5px 0px 0px 15px;
list-style-image: url('YourBulletUrl')
}

Where YourBulletUrl is the link to your bullet image. Hey, your list might look like this if you want to, just be creative.

Best Free Blogger Template Sites
Submitting Blogger Setemap to Google
How To Show Code In Blog Post
10 Tools To Help You Develop A Better Blog
Removing Dead Links From Google Search Results

Note: You can change the bullet style in posts too, just look for post ul instead ofsidebar ul.

No comments:

Post a Comment