Membuat Kotak untuk Posting di Website / Blog
Selasa, 10 Juli 2012
2
komentar
Salah satu cara agar tampilan website/blog lebih menarik dan informatif adalah dengan menambahkan CSS (Cascading Style Sheet). Tetapi kali ini tidak akan dibahas apa itu CSS, tetapi langsung menerapkan dan mencoba untuk membuat kotak informasi, peringatan, atau sejenisnya dalam sebuah tulisan di web/blog dengan salah satu fungsi/kode CSS.
Hal ini bisa kita lakukan dengan kode (tag) HTML div. DIV merupakan kode HTML yang akan menghasilkan blok paragraf, biasa saya istilahkan dengan Box, karena dengan menuliskan paragraf atau kalimat diantara tag <div>....</div> maka kalimat/paragraf tersebut akan tampil dalam box yang bisa kita atur tampilannya. Untuk memudahkannya, berikut berbagai contoh dan penggunaan tag DIV.
Color dan Background
Kotak ini sesuai dengan kode HTL berikut:
<div style="color:red;background:yellow;"> ... </div>
<div style="color:red;background:yellow;"> ... </div>
Border
Pada kotak/box sebelumnya, warna kuning terlihat tanpa garis tepi. Akan lebih menarik jika kita menambahkan garis tepi di sekelilingnya. Hal ini bisa dilakukan dengan menambahkan atribut border. Contohnya sebagai berikut:
Kotak ini sesuai dengan kode HTML berikut:
<div style="color:blue;background:#EBF3FB;border:1px solid #AACCEE;"> ... </div>
<div style="color:blue;background:#EBF3FB;border:1px solid #AACCEE;"> ... </div>
Penjelasan nilai setelah border adalah sebagai berikut : 1px menandakan ketebalan garis ( 1 pixel yang merupakan satu garis tipis), solid merupakan bentuk atau rupa garis dan #AACCEE merupakan warna garis. Masing-masing dipisahkan dengan tanda spasi.
Untuk bentuk (style) border selain solid, juga bisa bernilai none, hidden, dotted, dashed, double, groove, ridge, inset, outset dan inherit. Contoh masing-masing bisa dilihat tutorial CSS Border.
Padding dan Margin
Pada box sebelumnya tulisan dalam kotak terlihat terlalu rapat dengan garis tepi (baik kiri, atas, kanan atau bawah). Agar tampilan lebih indah, maka tulisan bisa dibuat agar mempunyai jarak dengan garis tepi (lebih menjorok kedalam). Hal ini bisa kita lakukan dengan menambahkan atribut padding. Berikut contohnya :
Kotak ini sesuai dengan kode HTML berikut:
<div style="color:#990099;background:#ADE4AD;border:2px dashed #006600;padding:5px;margin:10px;"> ... </div>
<div style="color:#990099;background:#ADE4AD;border:2px dashed #006600;padding:5px;margin:10px;"> ... </div>
Nilai padding:5px, berarti tulisan dalam box masuk kedalam sepanjang 5 pixel (1 pixel adalah satu garis tipis). Sebenarnya nilainya bisa diisi lebih detail misalnya padding:2px 3px 4px 5px, yang berarti jarak dari garis atas 2 pixel, dari kanan 3 pixel, bawah 4 pixel dan kiri 5pixel. Urutannya dari atas-kanan-bawah-kiri.
Untuk margin hampir sama dengan padding, hanya saja untuk margin menentukan jarak kotak ke area diluarnya (dari garis tepi keluar, mulai atas-kanan-bawah-kiri). Pada contoh tampilan diatas (yang berwarna hijau), tampak box posisinya menjorok kedalam. Karena margin:10px, maka posisi box sejauh 10 pixel dari atas, kanan, bawah dan kiri. Pengisian juga bisa dilakukan seperti padding.
Width (Lebar Box)
Dengan kode-kode seperti diatas, maka panjang box akan selebar konten atau area yang tersedia. Untuk membatasi lebar kotak, kita bisa menggunakan atribut width. Berikut contohnya:
Kotak ini sesuai dengan kode HTML berikut:
<div style="color:#FFFFFF;background:#FFD4AA;border:2px dotted #FF2A00;padding:5px;margin:5px;width:300px;"> ... </div>
<div style="color:#FFFFFF;background:#FFD4AA;border:2px dotted #FF2A00;padding:5px;margin:5px;width:300px;"> ... </div>
Properti width akan mengatur dan membatasi ukuran box. Pada contoh di atas, nilainya adalah 300 pixel. Sebenarnya masih banyak atribut lain yang bisa disertakan, tetapi sementara 6 atribut diatas sudah cukup untuk membuat tulisan lebih informatif (dengan pemilihan warna yang tepat tentunya).
Catatan :
Catatan :
- Satu hal yang perlu diperhatikan ketika menuliskan kode tersebut (dalam menulis artikel) adalah harus dalam mode HTML, bukan dalam mode visual.
- Agar script/kode yang kita masukkan ke dalam postingan sesuai dengan tampilan yang diinginkan, maka perlu melakukan Encode script/kode terlebih dahulu, dapatkan keterangannya disini.
Smart Best Info
