Gaya CSS untuk Kode di Blog Anda

css

Seorang teman saya bertanya kepada saya bagaimana saya membuat kode wilayah 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 hanya menunjuk ke gaya baru saya dengan membuat tag. Voila! Mengurai gaya:

  • Setel font menjadi Courier New… terlihat seperti editor kode umum
  • Atur ukuran font menjadi 8pt agar terlihat benar
  • Atur gaya batas paragraf ke 'inset'. Ini mereplikasi seperti apa textarea pada 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.

Itu semua juga ada! Satu catatan: Editor yang disertakan dengan Blogger tidak dapat menampilkan seperti yang akan muncul di blog Anda. Tapi itu bekerja dan tampak hebat!

Satu catatan lagi… setelah Anda mengedit tag, editor Blogger suka menggunakannya secara acak di tempat lain di postingan Anda. Ini sedikit mengganggu! Saran saya adalah menulis seluruh posting Anda dan kemudian membuat satu suntingan kecil setelahnya.

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

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

Selamat Coding!

3 Komentar

  1. 1
  2. 2
  3. 3

Bagaimana menurut Anda?

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.