ကိုကြီးဇော် ( မုန်တိုင်း )

Number or Bullet list are a very basic and important function for those who want to make a step by step instructions/tutorial or maybe for listing a several example in articles. Number or bullet list will make it easier for bloggers on creating a decent list without bothering to much on typing several numbers in the beginning of sentence. By default, the number and bullet list in your blog will be displayed like this:

Number List

1. How to Make a Great Food?
2. How to Make Decent Drawing?
3. How to Play Football?

Bullet List

• How to Make a Great Food?
• How to Make Decent Drawing?
• How to Play Football?

Some blog designers usually use this number list or bullet list standard code in template as a basic on creating the new interface of the navigation menu when being pointed by mouse cursor. So, if you are eager to know exactly how to customize the number or bullet list in your post, here is the tutorial.

1. Log in to Blogger
As usual, now head first to http://www.blogger.com and fill your username and password in the required fields and then press Sign in to begin entering your Blogger account. By giving the correct information regarding your username and password to Blogger, you will be automatically brought to the Dashboard.

2. Go to Layout
In the Dashboard, press the Layout/Design button in your chosen blog. By doing so, you will go to the new page regarding the configuration of your blog layout.

3. Go to Edit HTML
In the Layout/Design page, there are 3 sub-tabs in the navigation menu. Now press the sub-tab Edit HTML to start editing your blog template.

Anyway, before doing any kind of customization, as usual, i strongly suggest you to Save your current template just in case you do something wrong with the template. Now click at the link Download Full Template.


After clicking the Download Full Template link, you will be prompted with the choice about where you are gonna put the xml file in your Computer, just put it in the Desktop to make it easier if later you want to switch back to the current template.

4. Add the code that will control the appearance of Bullet list
Now press Ctrl + F at the same time to enter the Find mode. In this Find mode, you will be able to find any specific code that cannot be quickly done by only using the scrolling bar. Now find the code below:

Anyway, in this tutorial, i want to show you how to customize the appearance of Bullet list in the post area. But apparently, in the default template from Blogger, say, Minima Template, we can't find the exact code that controls the bullet list, because it has been set as a default by Blogger. That's why, in order to customize the bullet list, we must firstly add a new CSS style that will control the interface of the bullet list in the post area. Now copy the code below and then paste it before the code ]]></b:skin>
As you can see in that code above, the CSS code .post ul li indicates the code that controls the appearance of the bullet list in the Post area. To be exact, the code .post indicates the post area, and then the code ol li is the standard code that controls Bullet list.

For example, if i want to customize the appearance of Bullet list in the post area, i can just simply add certain commands inside the anchor of CSS code .post ul li. Here's the example:

As you can see in the code above, i've already added 2 new commands (color:red and font-size:25px) inside the CSS code .post ul li that later, will give the effect on the bullet list. Now look at the result below.

In the new CSS style of Bullet List, i also can make a different interface on the bullet list when being pointed by mouse cursor by adding a hover attribute (i already uncovered topic about adding hover attribute to make different interface in my previous post, check that page if you are interested to learn more). Here's the example:
As you can see in the code above, by adding the similar CSS codes along with the hover attribute, i can create a different interface when the bullet list is pointed by mouse cursor. So the result will look like this: