Membuat Gaya Penomoran Unik di Blogger

Fungsi Pengunaan:-

• Memberikan tampilan lebih menarik pada website kamu.
• Terlihat lebih kreatif.
• Penomoran terlihat lebih jelas.

Contoh Penomoran Default

1. Content.
2. Content.
3. Content.

Contoh Gaya Penomoran Unik

Berikut kami berikan 2 contoh penomor unik yang bisa kamu gunakan:

Contoh Gaya Penomoran Unik di Blogger 1

1. Content.
2. Content.
3. Content.
4. Content.

Contoh Gaya Penomoran Unik di Blogger 2

1. Content.
2. Content.
3. Content.
4. Content.

Kamu dapat mengubah text Content sesuai dengan text keinginan kamu

Berikut Cara Membuat Gaya Penomoran Unik di Blogger

Bagaimana Cara Membuat Gaya Penomoran Unik di Blogger ?

Warning!
Sebelum menambahakan atau mengedit XML tema kamu, alangkah baiknya untuk melakukan backup tema kamu terlebih dahulu. Jikalau terdapat kesalahan kamu dapat lebih mudah untuk mengembalikannnya seperti semula

Langkah 1 : Pertama-tama silahkan Login dan pergi ke Halaman blogger.

Langkah 2 : Pada Halaman Blogger pilih menu Tema.

Langkah 3 : Klik tanda panah pada sebelah pilihan menu "Sesuaikan"

Langkah 4 : Klik menu Edit HTML, kamu akan diarahkan pada halaman penggeditan tema.

Langkah 5 : Kemudian cari kode ]]></b:skin> atau /*]]>*/</style> kemudian paste kode CSS berikut tepat diatas kode tersebut.

Note!
Untuk penempatan di ]]></b:skin> hapus <style> .... </style>

CSS Untuk Gaya ke 1

	<style>
	/* Custom List Numbering style1*/
	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 > liimg { margin:15px0; width:100%; display:block; } ol.style1 > li#box-downloadimg { margin:0; } ol.style1 > li::before { content: counter(numbers); line-height: 23px; font-family: 'Noto Sans',sans-serif; font-size: 14px; font-weight: 700; left: -45px; width: 32px; height: 32px; text-align: center; position: absolute; color: #eb3b5a; border: 5px solid rgba(42,203,186,1.0); border-radius: 50px; top: -2px; } ol.standardli, ol.style2li, ol.style0li, ol.style1liulli { margin-bottom:15px; } ol.style1liul { margin-top:15px; } .darkModeol.style1 > li::before { color:rgb(126, 255, 245); border-color:rgba(50, 255, 126, 1.0); } </style>

CSS Untuk Gaya ke 2

	<style> /* Custom List Numbering style1*/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> liimg { margin:15px0; width:100%; display:block; } ol.style1> li#box-downloadimg {
	margin:0; } ol.style1> li::before { content:counter(numbers); line-height:23px; font-family:'Noto Sans',sans-serif; font-size:14px; font-weight:700; left:-45px; width:32px; height:32px; text-align:center; position:absolute; color:#eb3b5a;
	border:5pxsolid rgba(42,203,186,1.0); border-radius:50px; top:-2px; } ol.standardli,ol.style2li,ol.style0li,ol.style1liulli { margin-bottom:15px; } ol.style1liul { margin-top:15px; } .darkModeol.style1> li::before { color:rgb(126,255,245); border-color: rgba(50,255,126,1.0); } < /style>

Warning!
Sesuaikan .drK mode gelap dengan tema kamu. Jika tedak menggunakan mode gelap maka akan tetap seperti bawwan tema kamu

Langkah 6 : Simpan perubahan atau penambahan HTML pada tema kamu dengan klik ikon berikut 💾.

Langkah 7 : Lalu pergi ke menu Posting atau Page untuk menambahan penomoran unik.

Langkah 8 : Gunakan kode HTML di bawah pada mode HTML View.

Langkah 9 : Tempelkan atau paste kode berikut.

HTML Untuk Gaya ke 1

	<olclass="style1">
	<li>Content</li>
	<li>Content</li>
	<li>Content</li>
	<li>Content</li></ol>

HTML Untuk Gaya ke 2

	<olclass="style2">
	<li> Content </li>
	<li> Content </li>
	<li> Content </li>
	<li> Content </li></ol>

Ubah Content sesuai dengan text keinginan kamu.

Langkah 10 : Setelah selesai mengedit Postingan / Halaman jangan lupa untuk Save.