List style means numeric
serial that can be used in Blog post. Generally by default Blog has list style
option where by selecting two or more line if we click on List option then it
will automatically add the serial number per line.
You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this:
This tool will automatically number each element of the list taking an "order", hence the name "ordered lists in HTML". In each element a number is successively generated (from 1 onewards), though you can not see this in the HTML code.
1.National University Gazipur
2.University of Dhaka ,Dhaka Bangladesh
3.University of Engineering and Technology, Dhaka
4.BRAC University Dhaka ...
5.American International University-Bangladesh, Dhaka
6.Daffodil International University ,Dhaka
7.Rajshahi University ,Rajshahi
8.North South University
9.Jahangirnagar University
10.Savar Chittagong ,University
However, we can customize the elements on the list with CSS
Hopefully this will be useful for you ;)
You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this:
<ol> <li>The content of the 1st. element</li>
<li>The content of the 2nd. element</li>
<li>The content of the 3rd. element</li>
<li>The content of the 4th. element</li>
etc... </ol>
This tool will automatically number each element of the list taking an "order", hence the name "ordered lists in HTML". In each element a number is successively generated (from 1 onewards), though you can not see this in the HTML code.
Using ordered lists in posts
Creating numbered lists is very suitable for giving any instructions. It is ideal for cooking blogs where the steps in a recipe has to be numbered, or in those blogs that share tutorials... but can be used in any type of blog that need to number something.1.National University Gazipur
2.University of Dhaka ,Dhaka Bangladesh
3.University of Engineering and Technology, Dhaka
4.BRAC University Dhaka ...
5.American International University-Bangladesh, Dhaka
6.Daffodil International University ,Dhaka
7.Rajshahi University ,Rajshahi
8.North South University
9.Jahangirnagar University
10.Savar Chittagong ,University
However, we can customize the elements on the list with CSS
How to Add Some Amazing Styles to Blogger ordered lists
- Login to your Blogger account, go to Blogger dashboard, click the arrow adjacent to 'Go to post list icon' and select 'Template' from dropdown menu. You can also select the 'Template' from left navigation menu.
- Click 'Edit HTML'.
- search for (Ctrl+F) ]]></b:skin> and paste (Ctrl+V) the following css style 1or 2 or 3 code just after ]]></b:skin>
Example
Here are three examples that I have prepared for those of you who want to customize numbered lists:Style 1
- National University Gazipur
- University of Dhaka Dhaka Bangladesh
- University of Engineering and Technology Dhaka
- BRAC University Dhaka ...
- American International University-Bangladesh Dhaka
- Daffodil International University Dhaka
- Rajshahi University Rajshahi
- Jahangirnagar University Savar
- Chittagong University Chittagong
- North South University
.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */
padding: 0;
margin-bottom: 4em;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
font-weight: bold;
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em 4em;
*padding: .4em;
margin: .5em 0;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out;
}
.post ol li:hover:before{
transform: rotate(360deg);
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: 10px;
top: 50%;
margin-top: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
color: #fff; /* text color of numbers */
background: #FA8022; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
transition: all .3s ease-out;
}Style 2
- National University Gazipur
- University of Dhaka Dhaka Bangladesh
- University of Engineering and Technology Dhaka
- BRAC University Dhaka ...
- American International University-Bangladesh Dhaka
- Daffodil International University Dhaka
- Rajshahi University Rajshahi
- Jahangirnagar University Savar
- Chittagong University Chittagong
- North South University
.post ol{
counter-reset:li;
list-style: none;
*list-style: decimal;
margin-left:0;
padding-left:0
}
.post ol li{
position:relative;
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #e2e3e2; /* bottom border of each element */
background:#f2f2f2; /* background color of each element */
text-indent:14px;
}
.post ol li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-6px;
left:-10px;
font-family:'Oswald', serif;
font-size:14px; /* size of the numbers */
width:20px;
margin:0 0 10px 0;
padding:4px !important;
color:#A5A5A5; /* color of the numbers */
text-align:left;
background:#e2e2e2; /* background color of the numbers */
text-indent:6px;
text-shadow: 1px 3px 2px #fff;
}
.post ol li:after{
content:"";
position:absolute;
top:-5px;
left:17px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 5px 0 0 5px;
border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */
}Style 3
- National University Gazipur
- University of Dhaka Dhaka Bangladesh
- University of Engineering and Technology Dhaka
- BRAC University Dhaka ...
- American International University-Bangladesh Dhaka
- Daffodil International University Dhaka
- Rajshahi University Rajshahi
- Jahangirnagar University Savar
- Chittagong University Chittagong
- North South University
.post ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
padding: 0;
margin-bottom: 4em;
font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.post ol li{
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 4.5em;
text-decoration: none;
}
.post ol li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -1em;
background: #bada55; /* background color of the numbers */
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
.post ol li:after{
position: absolute;
content: '';
left: -5px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:8px solid #bada55; /* background color of the right arrow*/
}Customization:
In blue are highlighted the values that can be edited in the CSS of these three examples, and added some comments highlighted in /* green */, so that you can know what each thing does.Compatibility:
This will work in all browsers including IE8 - in the case of Internet Explorer 7, the number' styles will not be seen as it does not support the :before or :after pseudo-elements. However, I have added a line in the CSS that's specific for that browser and will bring up the default numbering of the ordered list.Hopefully this will be useful for you ;)
Post a Comment