Cara Menciptakan 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 instruksi HTML, CSS, dan JavaScript, perlu yang namanya "Box Code".

Box Code ialah kotak yang di buat dari properti HTML dan CSS guna sebagai tempat, wadah atau menaruh banyak sekali instruksi HTML, CSS, dan JavaScript dari suatu artikel yang membahas topik perihal itu. Desain tampilan blogger, misalnya.

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

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

Di bawah ini ada bermacam-macam instruksi yang dapat sahabat pilih dan gunakan; dan jangan lupa Bookmark halaman ini atau simpan kodenya di notepad.

• Masuk ke akun Google+ kemudian buka situs Blogger menyerupai biasa
• Buat artikel terlebih dahulu, silakan masukkan instruksi 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 ialah letak instruksi yang akan ditempatkan --- </div> 

Maka jadinya sebagai berikut:

--- Di sini ialah letak instruksi yang akan ditempatkan ---

Style #2

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

Maka jadinya sebagai berikut:

--- Di sini ialah letak instruksi yang akan ditempatkan ---

Style #3

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

Maka jadinya sebagai berikut:

--- Di sini ialah letak instruksi yang akan ditempatkan ---

Style #4

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

Maka jadinya sebagai berikut:

--- Di sini ialah letak instruksi yang akan ditempatkan ---

Style #5

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

Maka jadinya sebagai berikut:

--- Di sini ialah letak instruksi yang akan ditempatkan ---

Style #6

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

Maka jadinya sebagai berikut:

--- Di sini ialah letak instruksi yang akan ditempatkan ---

Cara menciptakan kotak untuk HTML, CSS, dan JavaScript di artikel blog bersama-sama gampang kok. Nggak sulit.

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

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