System
Home  ›  Blogger  ›  Documents  ›  Tips & Trick

Membuat Gaya Penomoran Unik di Blogger

"Menggunakan gaya penomoran bawaan blogger terlihat membosankan bukan? kini kamu bisa membuat Membuat Gaya Penomoran Unik di Blogger."

3 min read

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 > 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 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

<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.
Comments
Post a Comment