kali ini kita akan berbagi cara membuat bingkai pada tulisan di blog kita, biasanya kotak ini di gunakan untuk memperjelas penulisan pada tulisan HTML, ataupun bisa berguna untuk memperjelas artikel.
ada beragam bingkai yang akan kita pelajari kali ini.
1.border
2.Overflow / kotak scroll
<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#EFEFEF; text-align: center;">Tulisan temen-temen yang akan ditampilkan disini</div>
keterangan :- Border: 1px solid #CCC, berarti ketebalan garis (border) adalah 1px dengan warna abu-abu
- Margin: 10px 0px, berarti margin atas-bawah 10 px dan margin kiri-kanan 0 px
- Padding: 10px, berarti jarak tulisan ke border adalah 10px.
- Perintah auto pada width dan height supaya lebarnya mengikuti lebar kolom yang tersedia, sedangkan tingginya mengikuti isi (tulisan) yang dimasukkan kedalamnya. Kamu bisa merubah perintah auto kedalam bentuk pixel, misalnya: 100px.
- Background-color:#EFEFEF, berarti kotak berwarna abu-abu. Jika ingin dihilangkan warnanya, ganti kode #EFEFEF dengan none atau hapus perintah background-color berikut kode warnanya.
- Text-align: left, berarti tulisan dalam bentuk rata kiri. Jika kamu ingin mengubahnya, ganti saja left-nya dengan right, center, atau justify (rata kanan = right, rata tengah = center, dan rata kiri-kanan = justify).
2.Overflow / kotak scroll
<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: #E0ECF8; text-align: justify;">Tulisan yang temen-temen ingin tampilkan disini</div>
keterangan :
- Jika tulisan tersebut melebihi lebar (lebarnya 95% dari lebar container) yang tersedia dan tingginya melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.
- Perintah-perintah tambahan pada overflow ini mirip dengan perintah-perintah pada border sehingga untuk memahaminya bisa dilihat pada keterangan border.
kode HTML nya =
<textarea rows="5" cols="50">Tulisan yang temen-temen ingin tampilkan disini</textarea>
4.frame
pada bingkai frame ada beberapa macam bingkai di antaranya :
ridge
<div style="background-color: white; border: 5px #1780dd ridge; padding: 5px; text-align: left;">Tulisan yang temen-temen ingin tampilkan disini</div>
Big Dotted
<div style="background-color: white; border: 5px #1780dd Dotted; padding: 5px; text-align: left;">
Tulisan yang temen-temen ingin tampilkan disini</div>
Tulisan yang temen-temen ingin tampilkan disini</div>
Dashed
<div style="background-color: white; border: 5px #1780dd dashed; padding: 5px; text-align: left;">
Tulisan yang temen-temen ingin tampilkan disini</div>
Tulisan yang temen-temen ingin tampilkan disini</div>
Double
<div style="background-color: white; border: 5px #1780dd Double; padding: 5px; text-align: left;">
Tulisan yang temen-temen ingin tampilkan disini</div>
Tulisan yang temen-temen ingin tampilkan disini</div>
Groove
<div style="background-color: white; border: 5px #1780dd Groove; padding: 5px; text-align: left;">
Tulisan yang temen-temen ingin tampilkan disini</div>
Tulisan yang temen-temen ingin tampilkan disini</div>
inset
<div style="background-color: white; border: 5px #1780dd inset; padding: 5px; text-align: left;">
Tulisan yang temen-temen ingin tampilkan disini</div>
Tulisan yang temen-temen ingin tampilkan disini</div>
outset
Tulisan yang temen-temen ingin tampilkan disini
solid
<div style="border: 1px solid #eeeee; background-color:#00CCFF; padding: 5px; width: auto;"> Tulisan,gambar,maupun kode script </div>
Solid with color background
<div style="border: 3px #000099 solid; padding: 5px; background-color: #00FFCC; text-align: left"> Tulisan,gambar,maupun kode script</div>
bagaimana sobat lengkap bukan,,, ^_^ semoga bermanfaat
Judul: Membuat Bingkai Tulisan di Blog
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 06.24
Rating: 100% based on 99998 ratings. 5 user reviews.
Ditulis Oleh 06.24
