Cara membuat "highlight box" kotak warna untuk kode Html pada postingan blog

kali ini kang mimin akan memberikan sedikit cara unutk membuat kotak warna ( highlight box ) untuk kode HTML di postingan blog kalian buat  para blogger pemula mungkin sedikit kebingunan ketika akan memasukkan  Kode HTML pada sebuah Postingan di Blog.

Memasukkan Script Kode HTML pada sebuah Postingan di Blog, berbeda dengan cara biasa kita mengetik teks atau memasukkan gambar pada postingan kita, karena jika kode html tersebut kita masukkan secara langsung, maka kode HTML tersebut tidak akan ditampilkan pada postingan blog kalian.

Sebelum mempelajari cara membuat kota berwarna (highlight box) kita harus mempersiapkan script htlmnya terlebih dahalu Untuk menempatkan script atau kode html di postingaan blog agar dapat tampil dalam bentuk tulisan script, maka script atau kode html harus parse telebih dahulu sebelum dipasang. Cara Parse Script Html

Nah jangan khawatir .pada postingan kali ini kang mimin akan memberikan Trik paling mudah untuk memasukkan Script kode HTML pada postingan blog kalian semoga berhasil

Silahkan pilih dibawah ini :

1. Kotak simpel

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script atau tulisan anda disini </div>

Ket: 

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

2. Kotak simpel garis tipis

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 2px #5f200e solid; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script atau tulisan anda disini </div>

Ket:
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

3. Kotak simpel garis tebal

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 5px #5f200e solid; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script atau tulisan anda disini </div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

4. Kotak simpel garis double tipis

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"
- kode warna Pink Mengatur jenis garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

5. Kotak simpel garis double tebal

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 5px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script atau tulisan anda disini</div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"
- kode warna Pink Mengatur jenis garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

6. Kotak simpel garis putus-putus tipis

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 2px #610B38 dotted; padding: 10px; background-color:#82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"
- kode warna Pink Mengatur jenis garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

7. Kotak simpel garis putus-putus tebal

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 5px #610B38 dashed; padding: 10px; background-color:#82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"
- kode warna Pink Mengatur jenis garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

7. Kotak simpel garis titik-titik tipis

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"
- kode warna Pink Mengatur jenis garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

8. Kotak simpel garis titik-titik tipis

Silahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 5px #610B38 dashed; padding: 10px; background-color:#82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"
- kode warna Pink Mengatur jenis garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.

9. Kotak dengan secroll

Silahkan masukan kode script atau tulisan anda disini Silahkan masukan kode script atau tulisan anda disiniSilahkan masukan kode script atau tulisan anda disini

Script nya:

<div style="border: 2px #006400 solid; padding: 10px; background-color: #82CAFA; overflow: auto; height: 50px; width: 400px; text-align: left;"> Silahkan masukan kode script/tulisan anda disini </div>

Ket;
- kode warna Orange Mengatur ukuran garis dan warna garis "susaikan dengan kebutuhan"
- kode warna Pink Mengatur jenis garis "susaikan dengan kebutuhan"

- kode warna Merah Mengatur warna background "susaikan dengan kebutuhan"
- kode warna Hijau Mengatur posisi teks"susaikan dengan kebutuhan"
- kode warna Biru  Silahkan letakkan Script nya.
- kode warna Ungu   Height=400px : adalah lebar kotak & Width=50px : adalah tinggi kotak

10. Kotak kosong

Masukkan Script HTML atau Teks yang akan Di muat pada postingan disini

Script nya:

<div style="background-color: #fafafc; border: 1px solid rgb(221, 221, 221); padding: 10px; text-align: justify;">Masukkan Script HTML atau Teks yang akan Di muat pada postingan disini</div>

Sekian dari kang mimin cukup mudah kan…Semoga yang kang mimin sampaikan ini bermanfaat dan berguna buat kalian. Mohon maaf jika ada kesalahan dan kekhilafan.

Tweet

Postingan terkait:

Ditulis Muhammad Fakhrizal — Thursday, October 25, 2018 — 3 Comments — blog