If you are a serious blogger and you want to show your content as a professional blogger then sometimes you have to use a list, nested list, expandable list, table, responsive layout, interactive posts and more. It depends on what kind of content you have.
In this post, I am explaining how to create a list and nested list in the blogger post.
Lists are very useful when we have the data in a hierarchical way. When we have fewer data without hierarchy, we can use normal list, when we have fewer data with a simple hierarchy, we can use the nested list and when we have more data with complex hierarchy, we can use expandable/collapsible lists.
Click here to generate html ordered unordered nested list.
In this post, I am explaining how to create a list and nested list in the blogger post.
Lists are very useful when we have the data in a hierarchical way. When we have fewer data without hierarchy, we can use normal list, when we have fewer data with a simple hierarchy, we can use the nested list and when we have more data with complex hierarchy, we can use expandable/collapsible lists.
In this article, I am explaining a different kind of normal list, nested list, and expandable/collapsible list.
There are so many ways to create a list, nested list, and an expandable list. In this post, I will share all the ways which I know.Click here to generate html ordered unordered nested list.
Method 1 (using HTML) :
Step1:
Creating an unordered list (dot type):
<ul>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ul>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ul>
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
- dummy text1
- dummy text2
- dummy text3
If you want to add more list items in the same list, copy the red-colored text and paste after the red-colored text. Then the code looks like below.
and the result looks like below
Copy the above code, go to your post editor and repeat the step2 procedure.
Then the preview looks like below.
Copy the above code, go to your post editor and repeat the step2 procedure.
Then the preview looks like below.
Step1:
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
<ul>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ul>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ul>
and the result looks like below
- dummy text1
- dummy text2
- dummy text3
- dummy text3
Creating an unordered list (square type):
<ul type="square">
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ul>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ul>
Copy the above code, go to your post editor and repeat the step2 procedure.
Then the preview looks like below.
- dummy text1
- dummy text2
- dummy text3
Creating an unordered list (circle type):
<ul type="circle">
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ul>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ul>
Copy the above code, go to your post editor and repeat the step2 procedure.
Then the preview looks like below.
- dummy text1
- dummy text2
- dummy text3
Creating an unordered nested list:
<ul>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ul>
<li>child dummy text1</li>
<li>child dummy text2</li>
</ul>
</li>
<li>
parent dummy text3
</li>
</ul>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ul>
<li>child dummy text1</li>
<li>child dummy text2</li>
</ul>
</li>
<li>
parent dummy text3
</li>
</ul>
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
- parent dummy text1
- parent dummy text2
- child dummy text1
- child dummy text2
- parent dummy text3
If you want to add more child list items in the same list, copy the blue-colored text and paste after the blue-colored text. Then the code looks like below.
and the result looks like below
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
<ul>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ul>
<li>child dummy text1</li>
<li>child dummy text2</li>
<li>child dummy text2</li>
</ul>
</li>
<li>
parent dummy text3
</li>
</ul>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ul>
<li>child dummy text1</li>
<li>child dummy text2</li>
<li>child dummy text2</li>
</ul>
</li>
<li>
parent dummy text3
</li>
</ul>
and the result looks like below
- parent dummy text1
- parent dummy text2
- child dummy text1
- child dummy text2
- child dummy text2
- parent dummy text3
Creating an ordered list (number type):
Step1:
<ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ol>
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
- dummy text1
- dummy text2
- dummy text3
If you want to add more list items in the same list, copy the red-colored text and paste after the red-colored text. Then the code looks like below.
and the result looks like below
Step1:
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
Step1:
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
<ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ol>
and the result looks like below
- dummy text1
- dummy text2
- dummy text3
- dummy text3
Creating an ordered list (roman numeral type):
<ol type="i">
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ol>
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
- dummy text1
- dummy text2
- dummy text3
If you want to add more list items in the same list, copy the red-colored text and paste after the red-colored text. Then the code looks like below.
and the result looks like below
Step1:
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
<ol type="i">
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ol>
and the result looks like below
- dummy text1
- dummy text2
- dummy text3
- dummy text3
Creating an ordered list (alphabet type):
<ol type="a">
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
</ol>
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
- dummy text1
- dummy text2
- dummy text3
If you want to add more list items in the same list, copy the red-colored text and paste after the red-colored text. Then the code looks like below.
and the result looks like below
<ol type="a">
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ol>
<li>dummy text1</li>
<li>dummy text2</li>
<li>dummy text3</li>
<li>dummy text3</li>
</ol>
and the result looks like below
- dummy text1
- dummy text2
- dummy text3
- dummy text3
Creating an ordered nested list:
<ol>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ol type="a">
<li>child dummy text1</li>
<li>child dummy text2</li>
</ol>
</li>
<li>
parent dummy text3
</li>
</ol>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ol type="a">
<li>child dummy text1</li>
<li>child dummy text2</li>
</ol>
</li>
<li>
parent dummy text3
</li>
</ol>
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Click on Preview. Then the result looks like below.
- parent dummy text1
- parent dummy text2
- child dummy text1
- child dummy text2
- parent dummy text3
If you want to add more child list items in the same list, copy the blue-colored text and paste after the blue-colored text. Then the code looks like below.
and the result looks like below
Step1:
Add JQuery to your blog then,
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Publish your post and view the post. Then the result looks like below.
In this post, I shared all the ways which I know. There are so many ways to create a list and nested list and expandable/collapsible list. If I know any other methods in the future, I will update this post.
<ol>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ol type="a">
<li>child dummy text1</li>
<li>child dummy text2</li>
<li>child dummy text2</li>
</ol>
</li>
<li>
parent dummy text3
</li>
</ol>
<li>
parent dummy text1
</li>
<li>
parent dummy text2
<ol type="a">
<li>child dummy text1</li>
<li>child dummy text2</li>
<li>child dummy text2</li>
</ol>
</li>
<li>
parent dummy text3
</li>
</ol>
and the result looks like below
- parent dummy text1
- parent dummy text2
- child dummy text1
- child dummy text2
- child dummy text2
- parent dummy text3
Creating expandible/collapsible lists:
<style>
.tree_view, .tree_view ul{
list-style-type: none;
margin: 0;
padding: 0px 0px;
margin: 0px 20px;
}
.tree_view li:before {
content: "*";
vertical-align: sub;
border: 0px solid black;
padding: 0px 2px;
color: #1b90bb;
font-weight: bold;
font-size: 15px;
margin-right: 5px;
}
.tree_view ul{
display: none;
}
.tree_view .has_child{
cursor:pointer;
}
.tree_view .has_child:before{
content: "+";
vertical-align: middle;
border: 0px solid black;
padding: 0px 2px;
background: #1b90bb;
color: white;
font-weight: bold;
font-size: 15px;
margin-right: 5px;
}
.tree_view .has_child.active:before{
content: "-";
padding-right: 2px;
vertical-align: middle;
padding: 0px 4px;
}
</style>
.tree_view, .tree_view ul{
list-style-type: none;
margin: 0;
padding: 0px 0px;
margin: 0px 20px;
}
.tree_view li:before {
content: "*";
vertical-align: sub;
border: 0px solid black;
padding: 0px 2px;
color: #1b90bb;
font-weight: bold;
font-size: 15px;
margin-right: 5px;
}
.tree_view ul{
display: none;
}
.tree_view .has_child{
cursor:pointer;
}
.tree_view .has_child:before{
content: "+";
vertical-align: middle;
border: 0px solid black;
padding: 0px 2px;
background: #1b90bb;
color: white;
font-weight: bold;
font-size: 15px;
margin-right: 5px;
}
.tree_view .has_child.active:before{
content: "-";
padding-right: 2px;
vertical-align: middle;
padding: 0px 4px;
}
</style>
<ul class="tree_view">
<li>text1</li>
<li>text2</li>
<ul>
<li>text2a</li>
<ul>
<li>text2a1</li>
<ul>
<li>text2a1a</li>
<li>text2a1b</li>
<li>text2a1c</li>
</ul>
<li>text2a2</li>
<li>text2a3</li>
</ul>
<li>text2b</li>
<li>text2c</li>
</ul>
<li>text3</li>
<ul>
<li>text3a</li>
<li>text3b</li>
<li>text3c</li>
</ul>
</ul>
<script>
(function($) {
var parent_node = $(".tree_view").find("ul").prev("li");
parent_node.addClass("has_child");
parent_node.click(function(){
if(!$(this).hasClass("active")){
$(this).addClass('active');
$(this).next("ul").slideDown();
} else{
$(this).removeClass('active');
$(this).next("ul").slideUp();
}
});
})(jQuery);
</script>
Add JQuery to your blog then,
Copy the above code, go to your post editor and click on the HTML tab.
Step2:
Paste the copied code in HTML Editor.
Publish your post and view the post. Then the result looks like below.
- text1
- text2
- text2a
- text2a1
- text2a1a
- text2a1b
- text2a1c
- text2a2
- text2a3
- text2b
- text2c
- text3
- text3a
- text3b
- text3c
In this post, I shared all the ways which I know. There are so many ways to create a list and nested list and expandable/collapsible list. If I know any other methods in the future, I will update this post.