Fungsi border dan cara pengguaannya di blog. Border merupakan arahan css yang dipakai untuk menciptakan kotak di blog atau website lainnya. Salah satu pola penggunaan border ialah pembuatan kotak script, untuk menempatkan arahan script di posting blog. Berikut contohnya.
- Buka entri gres atau post usang kamu.
- Klik HTML kemudian masukan arahan sricpt dibawah ini.
- Lalu klik pada bab Compose. Maka tampilannya akan menyerupai ini.
- Klik .kode script disini. hapus dan ganti dengan arahan script yang kalian masukan.
<div style="border: 1px #cccccc solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 80px; text-align: left;">.kode script disini.</div>
overflow: auto; height: 80px; text-align: left;">.kode script disini.</div>
.kode script disini.
Keteranga arahan langkah 2:border: 1px ketebalan kotak, #cccccc warna garis kotak, solid(bentuk kotak)
background-color:#ffffff; warna kotak
height: 80px; tinggi kotak yang akan ditampilkan diposting blog.
overflow: auto; akan ada scroll dikotak, kalau sudah melebihi tinggi kotak height: 80px;
Berikut ini ialah bentuk kotak lain yang sanggup digunakan, untuk menggantikan bentuk solid.
dotted
dashed
double
groove
ridge
inset
outset
Satu lagi penggunaan warna yang berbeda disetiap border, atas,kanan,bawah,kiri.
untuk menciptakan border menyerupai ini, arahan yang digunakan:
<div style="border-top:2px solid green;border-bottom:2px solid red;border-left:2px solid #1780dd;
border-right:2px solid orange; padding: 10px;background-color:#ffffff;overflow: auto; height: 200px;
text-align: left;">.kode script disini.</div>
<div style="border-top:2px solid green;border-bottom:2px solid red;border-left:2px solid #1780dd;
border-right:2px solid orange; padding: 10px;background-color:#ffffff;overflow: auto; height: 200px;
text-align: left;">.kode script disini.</div>
Contoh-contoh diatas ialah penggunaan border didalam posting, berikut ini ialah penggunaan border di bab sidebar blog.
.sidebar .widget h2 {
border-top:2px solid red;border-bottom:2px solid green;border-left:2px solid orange;border-right:2px solid #1780dd; padding: 10px;background-color:#ffffff;
}
border-top:2px solid red;border-bottom:2px solid green;border-left:2px solid orange;border-right:2px solid #1780dd; padding: 10px;background-color:#ffffff;
}
Contoh gambar:
Artikel diatas merupakan sedikit pola penggunaan border diblog, masih banyak yang sanggup diberi border diblog, yang terpenting kita mengetahui arahan pada bab mana yang akan kita beri border. Semoga bermanfaat untuk anda.
0 comments:
Post a Comment