Blogging 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...
Contact Us
1 comments:
Nicw poat.
Post a Comment