Membuat Gaya Penomoran Unik di Blogger
"Menggunakan gaya penomoran bawaan blogger terlihat membosankan bukan? kini kamu bisa membuat 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
- Content.
- Content.
- Content.
Contoh Gaya Penomoran Unik
Contoh Gaya Penomoran Unik di Blogger 1
- Content.
- Content.
- Content.
- Content.
Contoh Gaya Penomoran Unik di Blogger 2
- Content.
- Content.
- Content.
- Content.
Kamu dapat mengubah text Content sesuai dengan text keinginan kamu
Berikut Cara Membuat Gaya Penomoran Unik di BloggerBagaimana 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
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 > 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: '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.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li { margin-bottom:15px; } ol.style1 li ul { margin-top:15px; } .darkMode ol.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 style2*/ ol.style2{ counter-reset:numbers; list-style:none; padding:0 } ol.style2 > li{ counter-increment:numbers; margin-bottom:25px; position:relative; margin-left:55px } ol.style2 > li img{ margin:15px 0; width:100%; display:block } ol.style2 > li::before{ content:counter(numbers); line-height:23px; font-family:'var(--fontB)'; font-size:14px; font-weight:bold; left:-45px; width:32px; height:32px; text-align:center; position:absolute; color: #9c27b0; border:5px solid rgb(254 202 87); border-radius:50% 0 50% 50%; top:-2px } ol.style2 li ul li{ margin-bottom:15px } ol.style2 li ul{ margin-top:15px } .darkMode ol.style2 > li::before{ color:rgb(255, 242, 0); border-color:rgba(24, 220, 255, 1.0) } </style>
Warning!
Sesuaikan .drK mode gelap dengan tema kamu. Jika tedak menggunakan mode gelap maka akan tetap seperti bawwan tema kamu
HTML Untuk Gaya ke 1
<ol class="style1"> <li>Content</li> <li>Content</li> <li>Content</li> <li>Content</li></ol>
HTML Untuk Gaya ke 2
<ol class="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.