Selamat pagi kawan, Kali ini saya akan posting tutorial blog yang mungkin kawan butuhkan, langsung saja. kali ini membuat macam-macam kotak dalam postingan, biasanya ini dibutuhkan/dipergunakan untuk kode HTML, kata yang penting juga banyak yang lainnya, oke dech mungkin kawan sudah mengerti jadi. Langsung saja, Cekidot>
Berikut langkah-langkah untuk bikin macam-macam tampilan kotak dalam postingan :
1. Kode untuk Solid Border
<div style="border: 2px #FF0000solid; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
2. Kode untuk Ridge Border
<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
3. Kode untuk Groove Border
<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
4. Kode untuk Inset Border
<div style="border: 2px #FF0000 inset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
5. Kode untuk Outset Border
<div style="border: 2px #FF0000 outset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
6. Kode untuk Double Border
<div style="border: 2px #FF0000 double; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
7. Kode untuk Dotted Border
<div style="border: 2px #FF0000 dotted; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
8. Kode untuk Dashed Border
<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>
Maka hasilnya seperti ini :
9. Kode untuk Dashed Border
<div style="border: 2px #FF0000 dashed; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini </div>
Maka hasilnya seperti ini :
10. Kode untuk Border dengan scroll, lebar dan tinggi
<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>
Maka hasilnya seperti ini :
Keterangan :
1. Tulisan berwarna pink : silahkan ganti dengan kode HTML yang anda inginkan.
2. Tulisan yang berwarna biru : ganti dengan kode warna menurut selera anda. Untuk mengganti kode warna silahkan kawan lihat di postingan saya mengenai Kode warna
3. Perlu diketahui : Dalam penulisan kode HTML yang ingin kawan tampilkan pada postingan harus pada posisi HTML bukan Compose.
Berikut langkah-langkah untuk bikin macam-macam tampilan kotak dalam postingan :
1. Kode untuk Solid Border
<div style="border: 2px #FF0000solid; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
2. Kode untuk Ridge Border
<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
3. Kode untuk Groove Border
<div style="border: 2px #FF0000 ridge; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
4. Kode untuk Inset Border
<div style="border: 2px #FF0000 inset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
5. Kode untuk Outset Border
<div style="border: 2px #FF0000 outset; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
6. Kode untuk Double Border
<div style="border: 2px #FF0000 double; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
7. Kode untuk Dotted Border
<div style="border: 2px #FF0000 dotted; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini</div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
8. Kode untuk Dashed Border
<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
9. Kode untuk Dashed Border
<div style="border: 2px #FF0000 dashed; padding: 10px; background-color: #FFCC00; text-align: left;"> Isi dengan tulisan kawan disini </div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
10. Kode untuk Border dengan scroll, lebar dan tinggi
<div style="border: 2px #FF0000 solid; padding: 10px; background-color: #FFCC00; overflow: auto; height: 50px; width: 300px; text-align: left;"> Isi dengan tulisan kawan disini </div>
Maka hasilnya seperti ini :
Isi dengan tulisan kawan disini
Keterangan :
1. Tulisan berwarna pink : silahkan ganti dengan kode HTML yang anda inginkan.
2. Tulisan yang berwarna biru : ganti dengan kode warna menurut selera anda. Untuk mengganti kode warna silahkan kawan lihat di postingan saya mengenai Kode warna
3. Perlu diketahui : Dalam penulisan kode HTML yang ingin kawan tampilkan pada postingan harus pada posisi HTML bukan Compose.