Ada beberapa sobat blogger yang mungkin belum tahu cara membuat bingkai (kotak) pada tulisan. Atau mungkin ada yang sudah tahu tapi tidak tahu bagaimana membuat tulisan dalam bentuk script HTML di dalam kotak tersebut. Atau mungkin juga sudah tahu tapi belum mengerti benar akan perintah-perintah yang ada karena hampir di setiap artikel mengenai bingkai ini tidak diberikan penjelasan yang memadai sehingga cukup menyulitkan bagi blogger pemula untuk memahaminya. Nah, mungkin tulisan ini akan berguna untuk mengatasi "ketidaktahuan" tersebut (Lagi-lagi sok tauk nih, hehe...).
Ada tiga jenis kotak yang biasa dipakai untuk membingkai sebuah tulisan, yaitu: border, overflow (biasanya disebut kotak scroll), dan textarea. Tentu saja ketiganya memiliki karakteristik yang berbeda. Nah, untuk mengetahui itu semua, berikut akan dijelaskan satu persatu mengenai bingkai tersebut.
Keterangan:
Untuk semua perintah tersebut kamu bisa mengubahnya sesuai dengan selera kamu.
Keterangan:
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.
Ok coy, selamat mencoba...
Ada tiga jenis kotak yang biasa dipakai untuk membingkai sebuah tulisan, yaitu: border, overflow (biasanya disebut kotak scroll), dan textarea. Tentu saja ketiganya memiliki karakteristik yang berbeda. Nah, untuk mengetahui itu semua, berikut akan dijelaskan satu persatu mengenai bingkai tersebut.
Border
Seperti namanya, border berarti bingkai yang membatasi tulisan/gambar 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: #FBFBEE; text-align: left;">TULISAN ATAU GAMBAR</div>
- 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).
Untuk semua perintah tersebut kamu bisa mengubahnya sesuai dengan selera kamu.
Overflow
Overflow berarti tulisan yang melebihi media yang 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. Dan 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>
- 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. Untuk membuatnya kamu tinggal mengkopi script berikut:
<textarea rows="5" cols="50">TULISAN ATAU GAMBAR</textarea>
Keterangan:
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. 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.
Menulis Kode Script Dalam Bingkai
Untuk menuliskan kode script kedalam bingkai, kamu harus melakukan encoding terlebih dahulu, karena jika tidak akan dianggap sebagai perintah bukan sebagai teks. Seperti < harus ditulis <, > harus ditulis >, " harus ditulis ", dll.
Untuk melakukan encoding terhadap script yang akan dijadikan teks, kamu bisa mengunjungi situs centricle.com.Ok coy, selamat mencoba...
Keterangan tambahan:
- Contoh bingkai border dapat dilihat pada kotak-kotak berwarna biru dalam tulisan ini, atau kotak keterangan ini.
- Contoh bingkai overflow dapat dilihat pada kotak SC Links.
- Contoh bingkai textarea dapat dilihat pada kotak SC Banner.
28 komentarPosting Komentar
Bener-bener infonya lebih detail n mudah dimngerti, beda dari yg laen. Teope begetelah pokona mah.
Sakali deui nuhun ah kang...
coba dah
Bagus Bung. Tapi, ane bisa liat contoh-contohya ga? Live Demonya gitu....
Best regards,
Irfan Melodic Nugroho
Melodramatic Mind
Facts on the Recent News
Hmm, sekarang ane tau, Pak.. Hehehe Sorry ya, ane gaptek soalnye :)
Eh, aye ada lagu baru di blog aye. Seperti biasa, datang, baca, komen, "sedekah" dan bonusnya download lagunya :)
Best regards,
Irfan Melodic Nugroho
Melodramatic Mind
Facts on the Recent News
nih artikel aku cari2
Makasih..artikel ini yang aku cari selama ini. Aku coba ya..
terimakasih yah sudah berbagi ilmu, saya sebagai pemula sangat membantu untuk mempercantik blog saya, ditunggu artikel yg lainnya, tks
wah tq banget nih atas materi blognya.. gw cobain kok he...
Alhamdulillah, bisa oge ayeunamah ngutip teks di kotak teh,,,nuhun pisan kang.
Eces, jentre, pertela,,,maenya urang Sunda teu ngarti?!hehe
makasih jadi tau nih nambah ilmu
makasih tutorialnya ini sobat saya pakai untuk blog direktori saya
kak aku mau tany nih gimana sih buat blog yang bagus ini??
aku udah punya tpai belum seberapa bagus??
aku mohon kak bisa membimbingku...
aku suka kalo ada ganbarnya bisA mintan ajarin gak kak???
@Rep Persatuan XI IPA:
Membuat blog spt ini harus sering ngerubah kode-kode CSS dan HTML yg dirasa perlu. Namanya juga supaya cantik, ya harus sering dipoles, hehe...
Sering-seringlah berkunjung ke SC. Banyak tutorial yg bisa sobat baca dan pelajari. Nanti juga pasti bisa membuat blog yg bagus.
Thanks Eui...infonya! Biasa baru otak-atik.
kk blh minta saran tentang blog aq ngak??
soal nya banyak yg kurang nie. maklum gaptek..
bung enes emang keren... cool
artikel sederhana tapi justru artikel ini yang sering kami kunjungi...ckckck ternyata penting banget artikel satu ini
makasih info nya..
keep posting :)
Uokey Gan...
Salam Sukses.
simpel, padat dan jelas
pokokny waowwwww dech
keren2
thanks bangatttt ya atas artikelny
ditunggu artikel berikutny
:)
terimakasih sob, berhasil
thanxs info nya bro....
salam kenal all...
Terima kasih..
mantab bung... mampir dong ke blog ane... http://aziz-mukhsin.blogspot.com
mantap kak :)
jangan lupa mampir juga http://bangaoo.blogspot.com
blog sampeyan mengejutkan,trimakasih tutornya,sdh sukses terpasang,muga2 link sy bukan link aktif soale blm paham,btw,tak follow blog sampeyan ya om
mampir ya http://dewaselaluonline.blogspot.com/
kalo kotak scripnya 3 atau lebih dalam satu baris bisa ngga? caranya gimana?
Gimana nih? @bahrianapz
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.