Cara Membuat Kotak untuk HTML, CSS & JavaScript di Postingan Blog

Cara Membuat Kotak untuk HTML, CSS & JavaScript di Postingan Blog

Jika isi artikel blog mengandung unsur-unsur kode HTML, CSS, dan JavaScript, perlu yang namanya "Box Code".

Box Code adalah kotak yang di buat dari properti HTML dan CSS guna sebagai tempat, wadah atau menaruh berbagai kode HTML, CSS, dan JavaScript dari suatu artikel yang membahas topik tentang itu. Desain tampilan blogger, misalnya.

Alasan dan/atau tujuan pembuatan kotak untuk HTML, CSS, dan JavaScript ini berguna untuk memisahkan mana isi artikel (tulisan) dan mana kode.

Cara Membuat Kotak untuk HTML, CSS & JavaScript di Postingan Blog

Di bawah ini ada beragam kode yang bisa sobat pilih dan gunakan; dan jangan lupa Bookmark halaman ini atau simpan kodenya di notepad.

• Masuk ke akun Google+ lalu buka situs Blogger seperti biasa
• Buat artikel terlebih dahulu, silakan masukkan kode yang disertakan di dalam artikel yang akan ditargetkan nanti
• Jika sudah selesai, tekan tombol HTML untuk beralih dari Compose ke HTML

Sampai di sini, silakan pilih salah satu diantaranya. Jangan lupa tekan tombol "preview" untuk melihat postingan yang akan dipublikasikan nantinya.

Style #1

<div style="border: 1px solid #444; line-height: 1.4em; font-family: Georgia; background-color: #f2f2f2; padding: 10px;">
--- Di sini adalah letak kode yang akan ditempatkan ---
</div>

Maka hasilnya sebagai berikut:

--- Di sini adalah letak kode yang akan ditempatkan ---

Style #2

<p style="border: 2px dashed #ee3f10; padding: 15px">
--- Di sini adalah letak kode yang akan ditempatkan ---
</p>

Maka hasilnya sebagai berikut:

--- Di sini adalah letak kode yang akan ditempatkan ---

Style #3

<div style="border: 2px dashed #ee3f10; padding: 15px;">
--- Di sini adalah letak kode yang akan ditempatkan ---
</div>

Maka hasilnya sebagai berikut:

--- Di sini adalah letak kode yang akan ditempatkan ---

Style #4

<p style="border: 1px solid #eceff5; background: #29447E; padding: 15px; color: #fff">
--- Di sini adalah letak kode yang akan ditempatkan ---
</p>

Maka hasilnya sebagai berikut:

--- Di sini adalah letak kode yang akan ditempatkan ---

Style #5

<p style="border: 1px solid #29447E; background: #8a9ac5; padding: 15px; color: #fff">
--- Di sini adalah letak kode yang akan ditempatkan ---
</p>

Maka hasilnya sebagai berikut:

--- Di sini adalah letak kode yang akan ditempatkan ---

Style #6

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;">
--- Di sini adalah letak kode yang akan ditempatkan ---
</div>

Maka hasilnya sebagai berikut:

--- Di sini adalah letak kode yang akan ditempatkan ---

Cara membuat kotak untuk HTML, CSS, dan JavaScript di artikel blog sebenarnya mudah kok. Nggak sulit.

Yang paling penting itu sobat harus paham bagaimana properti HTML dan CSS bisa bekerja sama. Praktisnya, HTML untuk menampilkan sedangkan CSS untuk mengatur gayanya.

Jadi itulah cara membuat kotak untuk HTML, CSS, dan JavaScript di postingan blogspot. Semoga berguna, salam.