Fungsi border dan cara pengguaannya di blog. Border merupakan kode css yang digunakan untuk membuat kotak di blog atau website lainnya. Salah satu contoh penggunaan border adalah pembuatan kotak script, untuk menempatkan kode script di posting blog. Berikut contohnya.
- Buka entri baru atau post lama kamu.
- Klik HTML lalu masukan kode sricpt dibawah ini.
- Lalu klik pada bagian Compose. Maka tampilannya akan seperti ini.
- Klik .kode script disini. hapus dan ganti dengan kode 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 kode 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, jika sudah melebihi tinggi kotak height: 80px;
Berikut ini adalah bentuk kotak lain yang dapat 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 membuat border seperti ini, kode 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 adalah penggunaan border didalam posting, berikut ini adalah penggunaan border di bagian 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 contoh penggunaan border diblog, masih banyak yang dapat diberi border diblog, yang terpenting kita mengetahui kode pada bagian mana yang akan kita beri border. Semoga bermanfaat untuk anda.
0 comments:
Post a Comment