Cara Membuat Bingkai Text di blog dengan bahasa HTML

السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Semua latar putih dan kita ingin menandai paragraf seperti keterangan atau catatan agar lebih menonjol daro paragraf atau kalimat yang lainnya.
Ada beberapa script html untuk membuat border tersebut, diantaranya

Seperti namanya, border yang artinya bingkai di sini bingkai untuk text atau paragram tertentu yang membatasi tulisan/gambar yang berada di dalamnya.
Langkanya cukup mudah tinggal COPAS script berikut :

Border Pertama :

COPAS KODE di bawah ini :

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">TULISAN ATAU GAMBAR</div>

Keterangan Teman bisa ubah sesuai dengan warna dan kebutuhan masing-masing :

Border : 1px solid #CCC, berarti ketebalan garis (border) adalah 1px dengan warna abu-abu (mengenai kode warna dapat dilihat di Adobe Photoshop atau CorelDraw. Atau bisa kamu kunjung situs HTML Color Codes).
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/gambar) yang dimasukkan kedalamnya. Kamu bisa merubah perintah auto kedalam bentuk pixel, misalnya: 100px.
Background-color: #FBFBEE, berarti kotak berwarna gading. Jika ingin dihilangkan warnanya, ganti kode #FBFBEE 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).

Contoh hasil Seperti berikut :

TULISAN ATAU GAMBAR

Border Ke-Dua: Overflow Textarea

Overflow artinya tulisan yang melebihi media yang sudah tersedia. 

Ada tiga perintah dalam overflow, yaitu scroll, hidden, dan auto. 

Jika scroll yang digunakan maka tulisan yang melebihi media akan dibuatkan scroll. 

Jika hidden, maka tulisan yang melebihi media akan disembunyikan. 

Jika auto, maka tulisan yang melebihi media akan dibuatkan scroll 

Dan sisanya akan disembunyikan.

Untuk membuatnya kamu tinggal mengkopi script berikut : 

<div style="overflow: auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 100px; background-color: none; text-align: left;">TULISAN ATAU GAMBAR</div>

Keterangan Teman bisa ubah sesuai dengan warna dan kebutuhan masing-masing :

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.

Contoh hasil Seperti berikut :

TULISAN ATAU GAMBAR

Border Ke-Tiga: Textarea

Textarea artinya kotak yang melingkupi daerah text itu berada.

Untuk membuatnya kamu tinggal mengkopi script berikut:

<textarea rows="5" cols="50">TULISAN ATAU GAMBAR</textarea>

Keterangan Teman bisa ubah sesuai dengan warna dan kebutuhan masing-masing :

Pada textarea ini tidak menggunakan width/lebar atau height tinggi namun hanya menggunakan rows/baris dan cols/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.
Pada script di atas menunjukkan 5 baris dan 50 kolom. Dengan demikian tulisan yang panjangnya melebihi 5 baris dan/atau melebihi 50 kolom akan disembunyikan.

Contoh hasil Seperti berikut :

TULISAN ATAU GAMBAR

Selesai

Gampang Tinggal KOPAS aja KODE nya.

Berbagi itu INDAH ... Thank's sudah berkunjung ke gubuk blog ku yang sederhana ini...

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Tweet

Postingan terkait:

— 1 Comment — Jurus KODE, Tutorial & Cara BLOG