Using bullets in a list

bulleted listYou 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, with square 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.

 bulleted list sample

 

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

Technorati Tags: ,

7 comments to "Using bullets in a list"

igvirene April 8, 2009 at 8:51 PM    

Hi, why this code can't seem to work for me. I was trying to put a bullet on my Recent Post widget for the title. Hope you could help me. Thanks.

Greenlava April 9, 2009 at 5:23 PM    

Igvirene,
thanks for stopping by. The code given is for inserting bullets into a list. It is not applicable for the title.
Looking back, my example might have misleaded you, my mistake.
Anyway you still can insert an image in front of the title, just go to Edit HTML, tick the Expand Widget Templates and look for your Recent Post title.
Under it you may find this:
< h2>< data:title/>< /h2>

You just insert this code after < h2>:
< img src="your_icon_url"/>

The end result should be like this:
< h2>< img src="your_icon_url"/>< data:title/>< /h2>

Preview your change, if it's good, then save.
I hope this helps. Please update me on the result. Thanks
*Now I'm going to repair the post :)

Alkhoirot May 15, 2011 at 4:08 PM    

Hi, the ordered and unordered list is ok in my blog. Except when I put a drop-down frame in. How to fix this issue?

Site: http://www.alkhoirot.net/
Issue: Top right sidebar

Your response very much appreciated.

Thanks

Greenlava May 17, 2011 at 2:39 PM    

@Alkhoirot
Sorry but I don't see a dropdown on your blog.

Kevin Ogbonna July 25, 2012 at 9:33 AM    

I liked the way you differentiate the bullet from the real shooting one....really funny

ahmad maryuki February 26, 2013 at 8:19 PM    

hi, i try on blogspot default template in simple not work. i want to change bullet in my widget from disc to square. any code? thanks

Greenlava February 26, 2013 at 8:47 PM    

@ahmad maryuki
Try this:
.widget ul {list-style-type: square;}
It will affect all widgets.

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment