Cara Custom List Number di Blogger

kali ini saya akan kembali membahas tentang cara membuat style list numbering yang ke
Nah,berikut ini adalah langkah-langkah cara memasang,dan menggunakan style list numbering di postingan blog.

Gaya Pertama

1. Masuk Ke Blogger
2. Pilih Tema dan Edit HTML
3. Letakan Kode CSS berikut di bawah ]]></b:skin>

 
ol.style1 {
     counter-reset:numbers;
     list-style:none;
     padding:0;
     }
ol.style1 > li {
     counter-increment:numbers;
     margin-bottom:25px;
     position:relative;
     margin-left:55px;
     }
ol.style1 > li img {
     margin:15px 0;
     width:100%;
     display:block;
     }
ol.style1 > li #box-download img {
     margin:0;}
ol.style1 > li::before {
     content:counter(numbers);
     line-height:23px;
     font-family:'Google Sans';
     font-size:14px;
     font-weight:bold;
     left:-45px;
     width:32px;
     height:32px;
     text-align:center;
     position:absolute;
     color:#222;
     border:3px solid rgba(57, 60, 155, 0.3);
     border-radius:4px;top:-2px;
     }
ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
     margin-bottom:15px;
     }
ol.style1 li ul {
     margin-top:15px;
     }
.dark-mode ol.style1 > li::before {
     color:rgb(80, 103, 197);
     border-color:rgba(57, 60, 155, 0.3);
     }
 

4. Simpan Tema

cara menggunakan Style List Numbering di postingan blog

1. buat postingan atau edit postingan yang sudah ada.
2. Kemudian pastekan kode dibawah ini di postingan kalian.

  
     
<ol class="style1">
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Amet odio rerum alias impedit!</li>
</ol>

3. Publikasikan

DEMO :

Gaya Kedua

CSS

.list-numbered {
  list-style: none;
  margin-left: 1em;
  counter-reset: line;
}

.list-numbered > li {
  position: relative;
  margin-bottom: 1.5em;
}

.list-numbered > li:before {
	position: absolute;
	left: -2.25em;
	display: inline-block;
  width: 22px;
	height: 22px;
	margin-right: 0.5em;
  background-color: #B53C2C;
	border-radius: 50%;
	color: #fff;
	text-align:center;
  line-height: 1.25em;
	counter-increment: line;
	content: counter(line);
}
  

HTML

  <ol class="list-numbered">
  <li>Line Item #1</li>
  <li>Line Item #2</li>
  <li>Line Item #3</li>
  <li>Line Item #4</li>
  <li>Line Item #5</li>
</ol>

DEMO :

Jangan digabung kodenya karena akan terjadi error.

Demikian cara merubah list number,semoga bermanfaat