59

Mudah membuat kotak informasi menarik di web/blog

Posted on by ebta
CSS tag DIV

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 kota informasi, peringatan, atau sejenisnya dalam sebuah tulisan di web/blog dengan salah satu fungsi/kode CSS.

Sekaligus ini menjelaskan (menjawab) pertanyaan salah satu pengunjung, tentang bagaimana cara menambahkan kotak informasi/peringatan penting, seperti di beberapa artikel ebsoft.

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 terseut akan tampil dalam box yang bisa kita atur tampilannya. Untuk memudahkannya, berikut berbagai contoh dan penggunaan tag DIV.

color dan background

Kotak ini adalah penggunaan dengan kode HTML berikut :
<div style="color:red;background:yellow;"> ... </div>

Perhatikan bagian setelah style. bagian itulah yang menentukan tampilan box dengan menggunakan DIV. Kode diatas menggunakan 2 atribut, yaitu color dan background. Color akan menentukan warna text dan background menentukan warna latar. Perhatikan pula penulisan tanda titik dua dan titik koma.

Atribut warna bisa diisi dengan tulisan seperti : black, blue,green, yellow, red, white dan lainnya. Bisa juga dengan menggunakan kode Heksadesimal, misalnya #FFFFFF untuk putih #0000FF untuk biru dan lainnya. Untuk mempermudah memilih warna terbaik, bisa menggunakan program gratis ColorPic

border

Pada kotax/box sebelumnya, warna kuning terlihat tanpa garis tepi. Akan lebih menarik jika kita meambahkan garis tepi di sekelilingnya. Hal ini bisa dilakukan dengan menambahkan atribut border. Contohnya sebagai berikut:

Kotak ini adalah penggunaan dengan kode HTML berikut :
<div style="color:blue;background:#EBF3FB;border:1px solid #AACCEE;"> ... </div>

Penjelasan nilai setelah border adalah sebagai berikut : 1px menandakan ketebalan garis ( 1 pixel 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 adalah penggunaan dengan kode HTML berikut :
<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 kanan 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 adalah penggunaan dengan kode HTML berikut :
<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).

Satu hal yang perlu diperhatikan ketika menuliskan kode tersebut (dalam menulis artikel) adalah harus dalam mode HTML, bukan dalam mode visual.

Post Views: 3,726

ebta

More Posts

59 Comments

  2. baru tahu apa itu CSS di sini..makasih kang, very useful for newbie like me..

  3. Selalu takjub dengan kreativitas di dunia blogging yang selalu meningkat. Top banget deh sang mpunya blog, salam sukses yach.

  7. hehe…terinspirasi dariku yg kemarin seharian bingung ngutik-ngutik web ya? ^_^

  27. Yg komentar no 1 dan 3 tu curang. Ya terang aja bisa no 1… 😀

    kalo css apa sebaiknya tidak dibuat dalam 1 file ato di tulis di header aja mas?


  28. Deprecated: Function create_function() is deprecated in /var/www/html/ebsoft.web.id/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1961

    @ardi: wah, dibilang curang…
    ck…ck…pdhl hanya ambil kesempatan…T.T

  31. wow keren…kalo saya pakenya buat tag blockquote…langsung ditulis di CSS…mantap juga sharingnya…trimsnya…

  32. Pingback: Mudah membuat kotak informasi menarik di web/blog « .:: MUFID ::. Mencari Ketenangan Jiwa

  33. Informasi menarik bos, sudah saya aplikasikan ke web saya…
    saya mau tambahkan, kalo mau edit gunakan dreamweaver (bagi pemula akan lebih mudah), seperti edit warna latar, atau border…(mengingat jarang yang tau daftar kode warna)


  35. Deprecated: Function create_function() is deprecated in /var/www/html/ebsoft.web.id/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1961

    @Remba The Immaculate, sok tau banget lo, kalo lo dah tau jangan senga’, dan kalo lo punya banyak ilmu tuh bagi2 kaya kang Ebta, jangan bisa nya nyela aja!!! Maju terus kang Ebta, cuekin aja tuh org gila, masih banyak orang yang membutuhkan amal ilmu dari anda.

  37. Kang sudah hampir 1 tahun lebih email kang ebta kog masuk ke folder spsm…. gimana caranya biar kembali ke folder email masuk makasih infonya

  41. Pingback: Cara Mudah membuat kotak informasi menarik di web/blog
  43. Pingback: - CATATAN FADLY RIFA'I

  44. Deprecated: Function create_function() is deprecated in /var/www/html/ebsoft.web.id/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 1961

    @Andy bangun (16)
    Iya, menggunakan CSS seperti ini

    @subagyo
    jika lebih kompleks sebaiknya ditempatkan dalam file css terpisah. Kalau di wordpress di file style.css

    @mardee (24)
    ya, sekali-kali…
    sekalian belajar

    @widat
    InsyaAllah segera keluar dvd versi terbaru

    @Remba (33)
    Tidak ada istilah kuno bagi mulai belajar..

    @carles
    Iya, tidak mengapa.

    @Formulablogger
    iya, atau menggunakan program color pick untuk lebih simplenya

    @Raysant (38)
    coba masukkan alamat email saja ke daftar alamat di account emailnya, sehingga kedepan tidak masuk ke spam lagi

  46. terima kasih bang ebta,artikelnye berguna sekali untuk newbie kaya saya…

  47. Kalo membuat kotak untuk tulisan berikut (di bawah) supaya formatnya nggak berubah, pake kode apa om…….

    NAME OF YOUR BLOG

    Thanks

  56. Pingback: Mudah membuat kotak informasi menarik di web/blog | ebsoft.web.id « Bhaliehuko's Blog
  58. Pingback: Mudah membuat kotak informasi menarik di web/blog « Sandelrahma's Blog

  59. mantab…tambahin yg lain dong….

    maz, btw rumahnya dmn? jwb d emailQ ya…aq org jogja, mgkn bs blajar lgsg. nuwun…

Comments are closed.