Cara Menambah Kotak Kode Html di Posting Blogger

Kadang kita ingin menambahkan kotak untuk kode/script HTML pada postingan dengan bentuk dan warna kotak yang berbeda sehingga mudah dibedakan. Hal ini tentunya akan memudahkan pembaca untuk mencari dan copy and paste kode tersebut untuk digunakan.

Berikut langkah-langkah untuk mengaktifkan fungsi ini (yang dapat diaktifkan pada setiap postingan) pada blog Anda.

1. Log in pada account blogger lalu menuju Dashboard >>> Template >> 
2. Lalu klik pada Customize
3. Sekarang tampil sebuah jendela, lalu klik  pada Advanced >>> kemudian>>> Add CSS
4. Setelah kotak Add Custom CSS  terbuka, tambahkan kode-kode berikut kedalam kotak yang tersedia lalu klik pada tombol apply to blog untuk mengaktifkan fungsi ini pada blog Anda.

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

5.  Sekarang, untuk menggunakan fungsi ini pada postingan, saat Anda mengetik postingan aktifkan tombol HTML dan letakkan kode diantara tags berikut:

<div class="code">

Paste kode Anda
</div>

Sekarang kode Anda akan tampak seperti:

Paste kode Anda