Mempercantik Coding di WordPress.com (Free Version)

Coding di halaman blog free version di wordpress.com kurang bisa tampil menarik, karena di dalamnya user tidak mendapat fitur untuk memasukkan plugin pemercantik kode seperti plugin Google Syntax Highlighter for WordPress . Karenanya saya membuat code inline berikut ketika akan menulis code di Add New Post. Kode ini langsung di-paste saja di bagian tab ‘HTML’ pada text editor di wordpress.

<div style=”margin: 10px; padding: 5px; white-space: pre; max-width: 450px; max-height: 250px; overflow: auto; BACKGROUND-COLOR: #f4f4f4; FONT-SIZE: small; FONT-FAMILY: Consolas, \”Courier New\”, Courier, Monospace;”>

Code Anda ada di sini . . .

</div>

Hasilnya.. seperti kode yang Anda lihat di halaman ini ^ ^. Cukup ribet… tapi hasil code lebih readable kan??? He3 …

Anda dapat mengatur nilai-nilai pada tag<div>, agar sesuai kebutuhan Anda.

• Mengatur posisi box code dengan margin

margin: 10px; berarti letak box akan 10px dari batas atas, bawah, kanan, dan kiri dari area tulisan Anda.

• Mengatur posisi text di dalam box dengan padding

padding: 5px; berarti posisi text dalam box berjarak 5px dari batas atas, bawah, kanan, dan kiri box code.

• Mengatur lebar maksimal box dengan max-width

• Mengatur tinggi maksimal box dengan max-height

• Mengatur warna background dengan BACKGROUND-COLOR

Nilai input warna yang diinginkan biasanya ditulis dalam #RGB. Misal, dalam code di atas, warna background di set warna abu-abu dengan nilai RGB : #f4f4f4;

Selamat mencoba ^ ^

One thought on “Mempercantik Coding di WordPress.com (Free Version)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s