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
Berikut kami berikan 2 contoh penomor unik yang bisa kamu gunakan:
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
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 > 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
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
<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.