Membuat Block Quotes, Border, Text Area

Membuat Block Quotes, Border, Text Area - Blockquote merupakan sebuah kotak yang membingkai tulisan tertentu yang menunjukan kalau tulisan itu merupakan sebuah tulisan penting yang perlu mendapat perhatian dari pembaca untuk mendapatkan inti dari bacaan secara keseluruhan. Berbicara mengenai blockquote, kita kadang merasa bosan dengan tampilan blockquote default yang hanya itu-itu saja. So, adakah cara untuk membuat variasi blockquote dalam blog kita ini? Yup, tentu saja ada. Dengan variasi blockquote yang lebih menarik tidak hanya akan memperjelas pembaca dalam menemukan dan memahami inti bacaan kita, tetapi juga akan memberikan daya tarik tersendiri bagi pengunjung yang tidak terbiasa banyak membaca untuk kemudian mengamati dan membacanya.

Kali  ini saya akan berbagi tiga Bloquote yang menarik untuk anda miliki.

Border

Seperti namanya, border berarti bingkai yang membatasi tulisan yang berada di dalamnya. Dan untuk membuatnya kamu tinggal mengkopi script berikut:

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#EFEFEF; text-align: center;">TULIS TEXT</div>

TULIS TEXT

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).

Overflow

Overflow berarti tulisan yang melebihi media yang tersedia. Ada tiga perintah dalam overflow, yaitu scroll, hide, dan auto. Jika scroll yang digunakan maka tulisan yang melebihi media akan dibuatkan scroll. Jika hide, maka tulisan yang melebihi media akan disembunyikan. Dan jika auto, maka tulisan yang melebihi media akan dibuatkan scroll dan sisanya akan disembunyikan. Untuk membuatnya Anda tinggal mengkopi script berikut:

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: #E0ECF8; text-align: justify;">TULIS TEXT</div>

TULIS TEXT

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.

Textarea

Textarea berarti kotak yang melingkupi daerah text itu berada.  Pada textarea tidak menggunakan width dan height (lebar dan tinggi) tetapi menggunakan rows dan cols (baris dan kolom) untuk menyatakan lebar dan tinggi areanya. Tetapi akibatnya akan sama dengan overflow, yaitu akan dibuatkan scroll dan disembunyikan jika text melebihi area baris dan kolom yang ditentukan. Untuk membuatnya kamu tinggal mengkopi script berikut:

<textarea rows="5" cols="50">TULIS TEXT</textarea>

Tulisan yang temen-temen ingin tampilkan disini

Keterangan:

• Pada script di atas menunjukkan 5 baris dan 50 kolom. Dengan demikian tulisan yang melebihi 5 baris dan/atau melebihi 50 kolom akan disembunyikan

:_: SELAMAT MENCOBA :_: