Blogger: Style CSS untuk Kode di Blog Anda
Seorang teman bertanya kepada saya bagaimana cara membuat kode region di entri Blogger. Saya melakukannya dengan menggunakan tag gaya untuk CSS di template Blogger saya. Inilah yang saya tambahkan:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: Ini adalah aturan CSS yang menargetkan HTML<p>
elemen dengan nama kelas “kode.” Artinya, setiap paragraf dengan kelas ini akan diberi gaya sesuai dengan properti berikut.font-family: Courier New;
: Properti ini menyetel jenis font menjadi “Courier New.” Ini menentukan font yang akan digunakan untuk teks dalam elemen yang ditargetkan.font-size: 8pt;
: Properti ini mengatur ukuran font menjadi 8 poin. Teks dalam elemen yang ditargetkan akan ditampilkan pada ukuran font ini.border-style: inset;
: Properti ini menyetel gaya perbatasan menjadi “inset.” Ini menciptakan tampilan cekung atau tertekan untuk batas di sekitar elemen yang ditargetkan.border-width: 3px;
: Properti ini menyetel lebar batas menjadi 3 piksel. Perbatasan di sekitar elemen akan setebal 3 piksel.padding: 5px;
: Properti ini menambahkan 5 piksel padding di sekitar konten di dalam elemen yang ditargetkan. Ini memberikan spasi antara teks dan batas.background-color: #FFFFFF;
: Properti ini menyetel warna latar belakang menjadi putih (#FFFFFF). Konten dalam elemen yang ditargetkan akan memiliki latar belakang putih.line-height: 100%;
: Properti ini menyetel tinggi garis menjadi 100% dari ukuran font. Ini memastikan bahwa baris teks diberi jarak sesuai dengan ukuran font.margin: 10px;
: Properti ini menambahkan margin 10 piksel di seluruh elemen. Ini memberikan jarak antara elemen ini dan elemen lain di halaman.
Kode CSS yang disediakan mendefinisikan gaya paragraf HTML dengan kelas “kode”. Ini mengatur font, ukuran font, gaya batas, lebar batas, padding, warna latar belakang, tinggi garis, dan margin untuk paragraf ini. Gaya ini dapat diterapkan pada cuplikan kode atau teks yang telah diformat sebelumnya dalam postingan Blogger untuk memberikan tampilan tertentu.
Berikut tampilannya:
p.kode {
font-family: Kurir Baru;
ukuran font: 8pt;
gaya perbatasan: sisipan;
lebar batas: 3 piksel;
padding: 5px;
warna latar belakang: #FFFFFF;
tinggi garis: 100%;
margin: 10 piksel;
}
Selamat Coding!