Cara Membuat Kotak Kode HTML/JavaScript, CSS3 & jQuery

Note: Blog ini sedang dalam masa pengembangan, baik dari segi SEO maupun artikel. Mohon maaf apabila gambar tidak tersedia untuk saat ini, - 10 Februari 2018.
Cara Membuat Kotak Kode HTML/JavaScript, CSS & jQuery

Dalam pembuatan artikel yang memasukkan unsur kode HTML/Javascript, CSS3 dan jQuery di dalam postingan blog, kotak kode HTML/JavaScript merupakan suatu kewajiban yang wajib disertakan.

Tujuannya sangat sederhana, yakni agar User Friendly atau bersahabat bagi para pembaca blog.

Lagi pula, dengan adanya kotak abu-abu yang bersifat "Border", para pembaca lebih mudah memilah bagian-bagian yang mana saja yang ada di dalam postingan blog.

Baca Juga: Cara Membuat Redirect Otomatis ketika 404 Page Not Found

Cara Membuat Kotak Kode HTML/JavaScript, CSS3 & jQuery


Buat dan selesaikan terlebih dahulu postingan blog yang sedang dikerjakan.

Pastikan pula, kode berupa HTML/Javascript yang akan diberikan KOTAK sudah di ketik di dalam artikel blog.

Nah, disinilah kita mulai tentang cara membuat kotak HTML/JavaScript...

Cara Membuat Kotak Kode HTML/JavaScript, CSS3 & jQuery

Sebelum artikel dipublikasikan, masuk ke mode HTML (bukan compose). Cari dan tentukan kode HTML/Javascript yang mana yang akan diberikan kotak kode HTML.

Tambahkan kode di bawah ini di bagian awalnya (pembuka):

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">

Tambahkan kode di bawah ini di bagian akhirnya (penutup)

</div>

Baca Juga: Cara Membuat Markup: HTML Tags and Formatting

Sebagai contoh, lihat di bawah ini...

<div style="background-color: #eaeaea; border: 1px solid #444; padding: 10px; text-align: left;">
Marcopolo adalah rokok dengan cita rasa "Surya 16" akan tetapi bernuansa Marlboro. Enak, kok!
</div>

Bagian yang paling sulit dari tutorial ini ialah ketika posting sudah selesai di buat, lalu dipasangkan "Border" ini, maka biasanya ada kode <div> yang saling tertimpa.

Apabila ada kode <div> yang tertimpa, pasang kode </div> tepat di atas <div>. Good luck...

Labels: Desain Blogger

Thanks for reading Cara Membuat Kotak Kode HTML/JavaScript, CSS3 & jQuery. Semoga berguna, Gan!

0 Komentar untuk "Cara Membuat Kotak Kode HTML/JavaScript, CSS3 & jQuery"

Gunakan anonymous kalau tidak punya Google+ Account.

Back To Top