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"
- Silahkan kalian login ke akun Blogger.com kalian terlebih dahulu.
- Pada menu dashboard kalian, pilih Template → Edit HTML
-
Salin kode CSS berikut ini dan letakkan diatas kode
]]></b:skin> template kalian. - Ubah desainnya sesuai keterangan jika kalian ingin berbeda dengan style diatas.
-
Jikalau sudah, lanjutkan klik tombol
Simpan untuk menerapkan perubahan pada template yang kalian pakai
/* 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 nilaiborder-radius maka border nomor akan
menjadi lingkaran.
Semakin besar nilai
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<ol class="style1">
<li>..........</li>
<li>.........</li>
</ol>
Keterangan:
Kode yang ditandai adalah class pemanggil dari kode CSS style "List Number".
Kode yang ditandai adalah class pemanggil dari kode CSS style "List Number".
Demo List Numbers
- Ini adalah contoh style list number
- 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
Posting Komentar untuk "Cara Merubah Style List Number di Blogger"