How to add this type of numbering automatically


#1

how to add this type of numbering automatically in the post with one click.

help me out there. need it quickly. I need alot of others similar to this. hope there are also alot of other people except shivansh who know codings.


#2

You have to make one yourself! There are none styles like this available. Shivansh also made ul and took inspiration from ol.It’s time consuming or I could create one! Do you want this style of numbered “ol” :sweat_smile: :unamused:


#3

yes I want

I checked it out here

but when I applied this it does not work


#4

Okay take add this css in the template by bloggertheme9 which you are using

.post ul li:hover {
  border-bottom: 2px dashed #FFF;
  color: #FFF;
  background: #333
}

.post ul li:hover a {
  color: #FFF
}

.post ul li {
  list-style: none;
  font-size: 14px;
  transition: .2s;
  background: #fdfdfd;
  padding: 10px;
  border-bottom: 2px dashed #D2D2D2;
  margin-left: -27px
}

.post ul li:before {
  font-family: FontAwesome;
  position: relative;
  content: "\f061";
  font-size: 18px;
  padding-right: 10px
}

.post ol li:hover:after {
  left: -.5em;
  border-left-color: #000
}

.post ol li:after {
  position: absolute;
  content: '';
  border: .5em solid transparent;
  left: -1em;
  top: 50%;
  margin-top: -.5em;
  transition: all .3s ease-out
}

.post ol {
  counter-reset: popcount
}

.post ol li:before {
  content: counter(popcount);
  counter-increment: popcount;
  position: absolute;
  left: -2.5em;
  top: 50%;
  margin-top: -1em;
  background: #111;
  color: #fefefe;
  height: 2em;
  width: 2em;
  line-height: 2em;
  text-align: center;
  font-weight: 700
}

.post ol li:hover {
  background: #f9f9f9
}

.post ol li {
  position: relative;
  display: block;
  padding: .4em .4em .4em .8em;
  margin: .5em 0 .5em 25px;
  background: #fafafa;
  color: #666;
  text-decoration: none;
  transition: all .3s ease-out
}

and then just add a numbered list through posts and work done :slight_smile:


#5

nafees it is looking like this :frowning: what to do now


#6

remove —> and see and tell me the changes or you are doing it the wrong way.