Multilevel List In Blogger Post

Sunday, December 16, 2012

Multilevel List In Blogger Post

Multilevel ListBlogging is an art and we will always need more and more tools to express our ideas.

When I am blogging I come across posts in which I have to give detailed steps for accomplishing a task. Just jotting them line by line looks kinda odd and is difficult to follow. It would be much easier if I have a multilevel list, like we have in Microsoft Word.

So, I created "steps"...

Sample...

1. My First Step

- Do this...

- Do that...

2. My Second Step

? If Condition

- Do this...

- Do that...


Here is how to use this in your blogger blog...

1. Edit Blogger Template HTML.

- Go to your blogger profile.

- Click on your blog title.

- From left side menu, click "Template".

? Backup your blog.

- Click "Backup/Restore" on top-right corner.

- Click "Download full template".

- Save your template as xml file.

- Click "Edit HTML".

- Click "Proceed".

2. Add CSS.

- Find the code "</head>".

- Paste the following code just above it.

<style type="text/css"> /* For tutorial steps -----------------------------*/ .steps{ border:1px dashed #aaaaaa; background:#f0f0f0; white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera */ white-space: -o-pre-wrap; /* Opera */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */ font-family:monospace; font-size:9pt; line-height: 10pt; color:#000; height:auto; width:auto; padding:5px; overflow:auto; } .steps h1{ font-size:inherit; line-height:inherit; font-family:inherit; background:none; color:inherit; font-weight:bold; margin-left:4px; border:0; margin-bottom:2pt; margin-top:0; display:block; padding:0; } .steps h2{ font-size:inherit; line-height:inherit; font-family:inherit; background:none; color:inherit; font-weight:normal; margin-left:20px; border:0; margin-bottom:2pt; margin-top:0; display:block; padding:0; } .steps h3{ font-size:inherit; line-height:inherit; font-family:inherit; background:none; color:inherit; font-weight:normal; margin-left:36px; border:0; margin-bottom:2pt; margin-top:0; display:block; padding:0; } </style>

- Click "Save template"

3. Use "steps" in your blogger post

- Keep the whole list inside...

<div class="steps"></div>

- Use <h1>, <h2> and <h3> tags for the three levels in the list.

- Example:

<div class="steps"> <h1>1. My First Step</h1> <h2>- Do this...</h2> <h2>- Do tha...t</h2> <h1>2. My Second Step</h1> <h2>? If Condition</h2> <h3>- Do this...</h3> <h3>- Do that...</h3> </div>


That's it... you have your own list... you can always tweak the CSS based on specific needs...

Comments please...

 See also...  » Ripping off Blog Name from Blog Post Title

» Tame Google Spider for Blogger

» Rearranging Widgets in Blogger

» Clean CSS

» Writing Better Comments in Code

» Photo Funia

» Adding Automatically Updating Chapter Name to Header in Office Word


ATOzTOA : Latest Headlines