Cara Merubah Style List Number di Blogger

Cara Merubah Style List Number di Blogger

Cara Merubah Style List Number di Blogger - Hai sahabat ruangcoder, pada postingan kali ini saya akan berbagi lagi tutorial seputar blogging yaitu Cara Bagaimana Merubah Style List Number di Blogger yang mana mungkin dapat membantu kalian para blogger untuk mempercantik tampilan artikel di blog atau yang memang jenuh dengan style defaultnya.

Dimana nantinya tutorial ini dapat kalian terapkan di semua platform asalkan paham dan mengerti coding berbasis HTML dan CSS. Tidak akan menjadi kendala untuk memahami struktur theme apabila kalian sendiri sudah tentu 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. Dan  untuk demo atau preview bisa kalian lihat dipostingan ini atau di codepen melalui tombol dibawah ini.

Menambahkan CSS "List Number"

1. Silahkan kalian login ke akun Blogger.com kalian terlebih dahulu.
2. Pada menu dashboard kalian, pilih Template ￫ Edit HTML
3. Salin kode CSS berikut ini dan letakkan diatas kode ]]></b:skin> template kalian.

/* 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 kalian ingin berbeda dengan style diatas.
5. Jikalau sudah, lanjutkan klik tombol Simpan untuk menerapkan perubahan pada template yang kalian pakai

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

Menambahkan CLASS ke Postingan

Disini sialhakan kalian sisipkan kode CLASS berikut ini pada artikel atau postingan kalian. Salin dan letakkan kodenya, lihat yang admin block, tinggal tambahkan itu aja saat kalian sudah menggunakan fitur list di bawaan blogger, jadi kalau mau default gak usah di kasih class itu tapi kalau mau yang seperti saya, tinggal tambahkan class seperti itu, 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

Penutup 

Mempercantik tampilan blog atau web memang bagus untuk kalian lakukan, tapi akan menimbulkan pengaruh buruk juga seperti contohnya pageload yang semakin berat apabila terlalu banyak menggunakan CSS. Gunakan tools Minify CSS dari ruangcoder agar sedikit meringankan pageload blog kalian ketika di cek di alat pengukur kecepatan. 

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