ByMr. Sultan Posted on Design Blog

Top 5 Best Css Ul Or OL List Style For website

Hello Friend aapne kai blog website par list design dekhe honge jisko dekhkar aap bhi ushi trah ke list design aapne blog me add karna chahte honge. aap bhi aapne blogspot blog website par css ul list style ko coutomize karke beautiful bana sakte hai. so is post me apko 5 best html css ul list style Aur sath me unhe apne blog me kaise install karen. Is post me batane ja rha hu.

 

css ul list style

Blog post ko user friendly banane ke liye chote chote tool ko perfect banana padta hai. Taki user ko post read karne me assan bhi lage aur beautiful bhi, to me apko 5 best css ul list style ke coding provide kar rha hu. Jo aapke blog ke design ko aur bhi better kar degi.

blog website me css ul list style ko customize karna bahut esaiy hai. me apko kuch step batane ja rha hu jinko follow karke aap  5 best html css list style examples ya ul list ko apne blog website me install kar skate hai.

 

5 Perfect css ul list style blog website ke liye.

In 5 css ul list style ke apne blog me install karne ke liye me apko last me batunga. Lekin pahle html css list style examples me se khoi sa bhi chosse kare Aur uske last me diye gaye step ko follow karke cs3 html list style ko coustome ya apne website blog me add kaise karte hai Janege.

html css list style examples 1.

css ul list style 1

css code

.list-type1{
width:400px;
margin:0 auto;
}
.list-type1 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: ‘Raleway’, sans-serif;
padding: 0;
margin-bottom: 4em;
}
.list-type1 ol ol{
margin: 0 0 0 2em;
}
.list-type1 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #93C775;
color: #000;
text-decoration: none;
-moz-border-radius: .3em;
-webkit-border-radius: .3em;
border-radius: 10em;
transition: all .2s ease-in-out;
}
.list-type1 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}
.list-type1 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#93C775;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
-moz-border-radius: 2em;
-webkit-border-radius: 2em;
border-radius: 2em;
color:#FFF;
}

HTML Code For Blog Article.

<div class=”list-type1″>
<ol>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
</ol>
</div>

 

Html css list style examples 2.

 
Css ul list style 2

css code

.list-type2{
width:400px;
margin:0 auto;
}

.list-type2 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: ‘Raleway’, sans-serif;
padding: 0;
margin-bottom: 4em;
}

.list-type2 ol ol{
margin: 0 0 0 2em;
}

.list-type2 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #FC756F;
color: #444;
text-decoration: none;
transition: all .2s ease-in-out;
}

.list-type2 a:hover{
background: #d6d4d4;
text-decoration:none;
transform: scale(1.1);
}

.list-type2 a:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
margin-top: -1.3em;
background:#FC756F;
height: 2em;
width: 2em;
line-height: 2em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
color:#FFF;
}

Html code for blog article

<div class=”list-type2″>
<ol>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
</ol>
</div>

Html css list style examples 3 .

 
Css ul list style 3

css code

.list-type3{
margin:0 auto;
width:500px;
}
.list-type3 li, .list-type3 a{
float:left;
height:35px;
line-height:35px;
position:relative;
font-size:15px;
margin-bottom: 12px;
font-family: ‘Raleway’, sans-serif;
transition: background-color 1.5s ease;
}
.list-type3 a{
padding:0 60px 0 12px;
background:#0089e0;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
}

.list-type3 a:before{
content:””;
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width: 18px 12px 18px 0;
}

.list-type3 a:after{
content:””;
position:absolute;
top:15px;
left:0;
float:left;
width:6px;
height:6px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.list-type3 a:hover{
background:#555;
}

.list-type3 a:hover:before{
border-color:transparent #0089e0 transparent transparent;
}

Html code for blog article

<div class=”list-type3″>
<ol>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
</ol>
</div>

Css ul list style 4.

 
Css ul list style 4

css code

.list-type4{
width:410px;
margin:0 auto;
}

.list-type4 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: ‘Raleway’, sans-serif;
padding: 0;
margin-bottom: 4em;
}
.list-type4 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #5975D9;
color: white;
text-decoration: none;
box-shadow:inset 0.5em 0 black;
-webkit-transition: box-shadow 1s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 1s;
}

.list-type4 a:hover{
box-shadow:inset 2em 0 black;
}

Html code for blog article

<div class=”list-type4″>
<ol>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
</ol>
</div>

 

Css ul list style 5

 
css ul list style 5

Css code.

.list-type4{
width:410px;
margin:0 auto;
}

.list-type4 ol{
counter-reset: li;
list-style: none;
*list-style: decimal;
font-size: 15px;
font-family: ‘Raleway’, sans-serif;
padding: 0;
margin-bottom: 4em;
}
.list-type4 a{
position: relative;
display: block;
padding: .4em .4em .4em 2em;
*padding: .4em;
margin: .5em 0;
background: #5975D9;
color: white;
text-decoration: none;
box-shadow:inset 0.5em 0 black;
-webkit-transition: box-shadow 1s; /* For Safari 3.1 to 6.0 */
transition: box-shadow 1s;
}

.list-type4 a:hover{
box-shadow:inset 2em 0 black;
}

Html code for blog article.

<div class=”list-type5″>
<ol>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
<li><a href=”#”>please Enter Your Content here.</a></li>
</ol>
</div>

 

How To Install Css Ul list style in blog website.

Blog me css ul list style ko change karne ke liye me ke liye apko css code ko apne templete me add karna hai. Aur templete me add karne ke liye niche diye gaye step ko follow kare.

Step 1.

  1. Sabse phale apne blogger ke dashboard me theme per click karen.
  2. Ab edit html per click kare.
  3. Ab apne templete ke vich me khi bhi click kare.
  4. Aur ctrl+f press karke  ]]>< /b:skin> code ko search karen
  5. Ab css ul list code ko ]]>< /b:skin> ke uper paste kar de.
  6. Aur ab apne tempete ko save kar de.
add css code in blog

Step 2.

 1. Ab jab bhi aap New article ya Blog post me list add karna chaye to aapko Html code for blog article.wale code ko html section me jakar paste karna hai.
2. please Enter Your Content here Ki jagah par aap list me jo likhna chahte hai. wo type karde.

3. Aur agar aap ul list me link add karna chahte hai. To “#” Ke jagah par link add karen.

Finally is trah se app blog post me ul list style ya bullet list ko change karke stylish bana skate hai. ye bahut hi simple method hai. ul list style ko change karne ke liye

I hope apko blog post me css ul list style ko kaise add karte hai. ache se samjh aha gaya hoga. Aur agar apko ul list change karne me khoi problem ho to hame comment karke puch skate hai.Aur is post ko other blogger ke stah aur facebook whatsapp per jarur share kare.Popular Posts:-

 

Similar Posts