Gaya CSS untuk Kode di Blog Anda

Seorang teman saya bertanya kepada saya bagaimana saya membuat wilayah kode pada entri blog terakhir saya. Saya sebenarnya 'memalsukan' wilayah kode menggunakan gaya. Di dalam Blogger, Anda dapat mengedit template Anda. Saya menambahkan gaya berikut:

p.code {font-family: Courier New; ukuran font: 8pt; border-style: inset; lebar batas: 3 piksel; padding: 5px; warna-latar belakang: #FFFFFF; tinggi garis: 100%; margin: 10px}

Langkah selanjutnya adalah mengedit tag saya dalam mode 'Edit Html'. Saya cukup menunjukkan gaya baru saya dengan membuat tag. Voila! Memecah gaya:

• Setel font menjadi Courier New… terlihat seperti editor kode umum
• Atur ukuran font menjadi 8pt agar terlihat benar
• Setel gaya batas paragraf ke 'inset'. Ini mereplikasi tampilan textarea di halaman.
• Atur lebar perbatasan menjadi 2 atau 3 piksel. Ini membuat gaya batas sisipan terlihat benar.
• Pengisi mengatur jarak antara batas dan teks di dalamnya.
• Warna latar… setel ke putih (#FFFFFF)
• Line-height - Saya menyesuaikan ini menjadi 100% karena beberapa gaya lain di tema blogger saya membuat tinggi baris saya sekitar 200%
• Atur margin menjadi 10 px. Ini memindahkan paragraf (tag p) 10 piksel dari semuanya.

Hanya itu yang ada! Satu catatan: Editor yang disertakan dengan Blogger tidak mampu menampilkan seperti yang akan ditampilkan di blog Anda. Tapi itu berhasil dan tampak hebat!

Satu catatan lagi… setelah Anda mengedit tag, editor Blogger suka menggunakannya secara acak di tempat lain di seluruh kiriman Anda. Agak menyebalkan! Saran saya adalah menulis seluruh posting Anda dan kemudian membuat satu edit kecil sesudahnya.

Satu catatan terakhir… pastikan untuk menggunakan Entitas HTML untuk menampilkan simbol Anda! Beberapa contoh:

• Kutipan (“) adalah“
• > adalah>
• > adalah>

Selamat Coding!