Cara Mengkustomisasi Style List Number di Blogger

Mempercantik tampilan artikel bukanlah suatu hal yang wajib, tetapi jika untuk meningkat gairah membaca mungkin perlu sobat coba.

Hai sob, pada postingan kali ini admin akan berbagi lagi tutorial seputar blogging yaitu Cara Bagaimana Mengkustomisasi Style List Number di Blogger yang mana mungkin dapat membantu kalian untuk mempercantik tampilan artikel di blog.

Tutorial ini dapat sobat terapkan di semua platform asalkan paham dan mengerti coding berbasis HTML dan CSS. Tidak akan jadi kendala untuk memahami struktur theme apabila kalian sendiri sudah paham bahasa pemrograman yang sering digunakan pada platform blog masing-masing.

Mendesain tampilan untuk mempercantik blog itu sendiri bukanlah suatu hal yang wajib, namun juga tak sedikit yang merelakan waktunya hanya untuk sekedar mempercantik tampilan blog terutama di postingan supaya terlihat lebih menarik dan tidak membosankan saat dibaca pengunjung.

Yuk langsung aja ke tutorialnya daripada saya ketik panjang-panjang yang akhirnya gak dibaca. Oh iya untuk demo atau preview bisa lihat dipostingan ini atau di codepen melalui tombol dibawah ini.

Cara Mengkustomisasi Gaya "List Number" di Blogger

Untuk menerapkan tutorialnya, kalian diharuskan mengikuti dua tahap ini yaitu menambahkan HTML sebagai pemanggil class nya di postingan, dan juga menambahkan CSS pada template kalian.

Sebelum melanjutkan ke tutorial, ada baiknya anda backup dahulu template yang digunakan sekarang untuk berjaga-jaga jika ada kesalahan saat coding.

Menambahkan CSS "List Number"

  1. Silahkan login ke akun Blogger.com sobat.
  2. Pada menu dashboard, pilih Template → Edit HTML
  3. Salin kode CSS berikut ini dan letakkan diatas kode ]]></b:skin> template.
    /* Custom List Style Numbers */
    .Blog article.post ol.style1 {
         counter-reset:numbers;
         list-style:none;
         padding:0;
         }
    .Blog article.post ol.style1 > li {
         counter-increment:numbers;
         margin-bottom:25px;
         position:relative;
         margin-left:55px;
         }
    .Blog article.post ol.style1 > li img {
         margin:15px 0;
         width:100%;
         display:block;
         }
    .Blog article.post ol.style1 > li #box-download img {
         margin:0;}
    .Blog article.post 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;
         }
    .Blog article.post ol.standard li, .Blog article.post ol.style2 li, .Blog article.post ol.style0 li, .Blog article.post ol.style1 li ul li {
         margin-bottom:15px;
         }
    .Blog article.post ol.style1 li ul {
         margin-top:15px;
         }
    .dark-mode .Blog article.post ol.style1 > li::before {
         color:rgb(80, 103, 197);
         border-color:rgba(57, 60, 155, 0.3);
         }

    Keterangan:
    Semakin besar nilai border-radius maka border nomor akan menjadi lingkaran.

  4. Ubah desainnya sesuai keterangan jika ingin berbeda dengan style diatas.
  5. Jikalau sudah, lanjutkan klik tombol Simpan untuk menerapkan perubahan.

Pada langkah ini, kalian belum selesai sepenuhnya membuat style "List Numbers" seperti yang admin gunakan. Jika ingin menerapkannya di postingan, sobat bisa ikuti tutorial dibawah ini.

Menambahkan HTML ke Postingan

Sisipkan kode HTML berikut ini pada artikel atau postingan sobat. Salin dan letakkan kodenya di tab mode penulisan HTML bukan Compose.

<ol class="style1">
<li>..........</li>
<li>.........</li>
</ol>

Keterangan:
Kode yang ditandai adalah class pemanggil dari kode CSS style "List Number".

Demo List Numbers
  1. Ini adalah contoh style list number
  2. Ini adalah contog dari style list number

Kesimpulan

Mempercantik tampilan blog atau artikel memang bagus dilakukan, tapi akan menimbulkan pengaruh buruk seperti pageload yang semakin berat apabila terlalu banyak menggunakan CSS. Gunakan tools Minify CSS agar sedikit meringankan pageload blog sobat ketika di cek di alat pengukur kecepatan.

Mungkin sekian dahulu postingan saya yaitu Cara Mengkustomisasi Style List Number di Blogger, semoga selalu bermanfaat.
Terimakasih