Wednesday, October 11, 2017

5 Best Css ul List Style or Bullet List Ko Change Kaise Kare.

Blogger website me css ul list style ko coustomize karke beautiful banaya ja sakta hai. so me apko 5 best html css ul list style Aur sath me unhe apne blog me kaise install karte hai. Is post me batane ja rha hu.

5 stylish css ul list styles.

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. Jinse aap Apne blog website ke css ul list style ko beautiful bana skate hai.




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 in 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.
<ol> <li>Enter you content here.</li> <li>Enter you content here.</li> <li>Enter you content here.</li> </ol> </div>

html css list style examples 2.

Css ul list style 2


css code
<div class="list-type1">.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-type1"><div class="list-type2"> <ol> <li>Enter you content here.</li> <li>Enter you content here.</li> <li>Enter you content here.</li> </ol> </div>

html css list style examples 3 .

Css ul list style 3


css code
<div class="list-type1">.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-type1"><div class="list-type3"> <ol> <li>Enter you content here.</li> <li>Enter you content here.</li> <li>Enter you content here.</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>Enter you content here.</li> <li>Enter you content here.</li> <li>Enter you content here.</li> </ol> </div>


Css ul list style 5

css ul list style 5

Css code.
.list-type5{ width:410px; margin:0 auto; } .list-type5 ol { list-style-type: none; list-style-type: decimal !ie; /*IE 7- hack*/ margin: 0; margin-left: 1em; padding: 0; counter-reset: li-counter; } .list-type5 ol li{ position: relative; margin-bottom: 1.5em; padding: 0.5em; background-color: #F0D756; padding-left: 58px; } .list-type5 a{ text-decoration:none; color:black; font-size:15px; font-family: 'Raleway', sans-serif; } .list-type5 li:hover{ box-shadow:inset -1em 0 #6CD6CC; -webkit-transition: box-shadow 0.5s; /* For Safari 3.1 to 6.0 */ transition: box-shadow 0.5s; } .list-type5 ol li:before { position: absolute; top: -0.3em; left: -0.5em; width: 1.8em; height: 1.2em; font-size: 2em; line-height: 1.2; font-weight: bold; text-align: center; color: white; background-color: #6CD6CC; transform: rotate(-20deg); -ms-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); z-index: 99; overflow: hidden; content: counter(li-counter); counter-increment: li-counter; }

Html code for blog article.
<div class="list-type5"> <ol> <li>Enter you content here.</li> <li>Enter you content here.</li> <li>Enter you content here.</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.



  1. Sabse phale apne blogger ke dashboard ke theme per click kare.
  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>type karke enter kar de.
  5. Ab css ul list code ko ]]>< /b:skin> ke uper paste kar de.
  6. Aur ab apne tempete ko save kar de.

Finally jab bhi aap apne blog post me css ul list ko add kare tab uper diye gaye html code ko apne blog post me add kare. aur
uper diye gaye "Enter your centent here" ke jagah per apne blog post ke words type kare. Is tarah se blog post me css ul list style ko change kar skate hai.
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 jarur bataye. Aur is post ko other blogger aur facebook whatsapp per jarur share kare.
  1. Add stylish drop down menu in blog website.
  2. Animated demo and downlaod button.
  3. Add stylish breaking news ticker in blog websites.

Share This Post On Soical Media:-
About Author :- My name is Sultan From dehradun india. Iam a passinate and full Time blogger. If you like his articles then share with your friend and Social media sites facebook twitter more Etc and Keep Visting on Blog net Book.

Let's Get Connected:- Facebook | Twitter | Google Plus

Related Posts

0 comments: