Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

banner
We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Jul 12, 2007

Digg This Story

Numbered List and Bulleted List

The Blogger's post editor gives you one number style for an Ordered (Numbered) list and one bullet style for an Unordered (Bulleted) list. Here, we shall let you know how you can change these styles to add variation to your posts. We shall also discuss how links can be incorporated into such lists and how a marquee tag can be added to make the list scroll.

Ordered (Numbered) List

We like to use ordered lists to assign numbers to a list of items or a step-by-step instructional guide. Inserting it into our posts is easy. When you are creating a post, choose the “Compose” mode and click the button in the toolbar that says “Numbered list”. Type your items and press Enter after every item. You will see numbers 1, 2, 3 and so on assigned to each item.

Numbered List and Bulleted List

Sometimes, you may not want numbers. For example, if you have a Table of Contents, you may want to use capital letters A, B, C to the list. If you have a long article with several lists, you may want to use Roman numbers I, II, III too. What you do after typing the list is to change the mode from “Compose” to “Edit HTML”. You will see the HTML that looks like this:-

How to bake a chocolate cake

<ol>
<li>Preheat oven.</li>
<li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li>
<li>Add water and oil.</li>
<li>Add eggs, milk and vanilla.</li>
<li>Pour batter into pan.</li>
</ol>


The <ol> tag represents “ordered list” and each list item starts with <li> tags. Notice that they must have closing tags. After each list item, there is a </li> tag and after the entire ordered list, there is a closing </ol> tag. If I want the numbers changed to capital letters, I can add a type="A" into the code. The code will now be this:-

<ol type="A">
<li>Preheat oven.</li>
<li>Sift together flour, baking powder, baking soda, cocoa and sugar.</li>
<li>Add water and oil.</li>
<li>Add eggs, milk and vanilla.</li>
<li>Pour batter into pan.</li>
</ol>


When you click back to “Compose” mode, this is how the post will look:-

Numbered List and Bulleted List

The other possible types that you can use are the Lowercase letters, Roman numerals, and Lowercase Roman numerals.

type="a" will give you a, b, c
type="I" will give you I, II, III
type="i" will give you i, ii, iii

Unordered (Bulleted) List

Using the above cake recipe example, the ingredient list need not have any particular order. Instead of numbers, we will use “Bulleted list” in the toolbar to type in our ingredients. The standard Blogger style is a Disc bullet (a black colored dot).

Numbered List and Bulleted List

This time, when we view the code under “Edit HTML” mode, we will see this:-

Ingredients

<ul>
<li>all purpose flour</li>
<li>baking powder</li>
<li>baking soda</li>
<li>cocoa</li>
<li>sugar</li>
<li>water</li>
<li>oil</li>
<li>eggs</li>
<li>milk</li>
<li>vanilla</li>
</ul>


The <ul> tag means “unordered list”. The other styles you can change the bullets to are the circle and the square. Just like the ordered list, we can add within the <ul> tag the type of bullet. We can have:-

<ul type="circle">

Or

<ul type="square">

We have incorporated both of them into our sample to let you see how they would appear:-

Numbered List and Bulleted List

Link List

Instead of having just words, we can have text links within an ordered or unordered list. A detailed writeup of text link codes can be found at our article on Hyperlinks and Image Links. Put the text link code into the numbered or bulleted list. For example, this HTML code:-

<ul type="circle">
<li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li>
<li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li>
<li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li>
</ul>


Will give you this, with links opening in new windows or tabs when clicked.


You can also replace the text links with image links.

Scrolling Links

We can make the links scroll by combining the above code with the marquee tag. The various styles of scrolling text and their attributes were explained in our article on Scrolling Text – Marquee HTML Code.

If we take one of the specimen scrolls, this scrolling text code:-

<marquee direction="up" scrollamount="2" height="100px" bgcolor="#ffffcc">
<ul type="circle">
<li><a href="http://tips-for-new-bloggers.blogspot.com/" target="_blank">Blogger Tips</a></li>
<li><a href="http://quotes-motivational-inspirational.blogspot.com/" target="_blank">Famous Quotes</a></li>
<li><a href="http://fairy-tales-fables-business.blogspot.com/" target="_blank">Business Fables</a></li>
</ul>
</marquee>


Will give you a link list that scrolls upwards:-



© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button

5 comments:

Anonymous said...

This really help me a lot with my class I am taking so I can get homework turn in today. The others didn't give me any examples to go by.

Thank YOu Very Much!!!

KALCHA said...

KUDOS to U Guys... I am really at awe with Ur patience, clarity and vision in Ur posts that can help any new comer to accustom to the world of blogging. ---KALCHA

GiRiSh ShArMa said...

hey thanks buddy for this great blog...
i've a problem when i click on customize on my blog, it all the things but it dosen't show add page elements link....
but it was showing this before and i dont know how they removed that thing.........
thanks again

Anonymous said...

I am not sure if i am posting this question in the right place could you please tell me how to highlight a title in a blog post.
Thanks in advance

AGENT 'J' said...

bro...thanks..take a look at my blog.....those scrolling text's are awesome http://free-download-park.blogspot.com/