Kali ini mau berbagi code untuk membuat kotak di blog, adapun kode-kode nya tertera dibawah ini yang pada dasarnya : Border untuk mengatur tebal bingkai, dengan # untuk mengatur warna garis, Background-color untuk mengatur warna latar belakang, Padding untuk jenis border dan Text-align untuk mengatur baris kalimat yang ingin diletakkan didalam kotak.
Berikut jenis-jenis kotak yang dapat diterapkan didalam blog :
1. KOTAK SIMPLE
Silahkan masukan kode script/tulisan anda disini
<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini </div>
2. KOTAK SIMPLE DENGAN BORDER
Silahkan masukan kode script/tulisan anda disini
<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Silahkan masukan kode script/tulisan anda disini </div>
3. KOTAK DENGAN 1 JENIS GARIS
Silahkan masukan kode script/tulisan anda disini
<div style="border: 3px #5f200e outset; padding: 10px; background-color: #d9da81; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>
4. KOTAK DENGAN 2 JENIS GARIS
Silahkan masukan kode script/tulisan anda disini
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>
5. KOTAK DENGAN GARIS LUAR
Silahkan masukan kode script/tulisan anda disini
<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>
6. KOTAK DENGAN GARIS DOUBLE
Silahkan masukan kode script/tulisan anda disini
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>
7. KOTAK DENGAN GARIS PUTUS-PUTUS
Silahkan masukan kode script/tulisan anda disini
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>
8. KOTAK DENGAN TITIK-TITIK
Silahkan masukan kode script/tulisan anda disini
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Silahkan masukan kode script/tulisan anda disini</div>
9. KOTAK DENGAN SCROLL
Silahkan masukan kode script/tulisan anda disini, Silahkan masukan kode script/tulisan anda disini, Silahkan masukan kode script/tulisan anda disini, Silahkan masukan kode script/tulisan anda disini, Silahkan masukan kode script/tulisan anda disini
<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>
Keterangan : 400px : adalah lebar kotak, 50px : adalah tinggi kotak
Selamat mencoba ...
0 Komentar