earth

Guestbook

/* Iklan google ads */
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.
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>
Keterangan:
  • 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>
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. 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 &lt;, > harus ditulis &gt;, " harus ditulis &quot;, 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.

  • Artikel Terkait Dengan HTML Tutorials

    Terimakasih sudah membaca artikel SC Community's Blog

    29 komentar

    Bener-bener infonya lebih detail n mudah dimngerti, beda dari yg laen. Teope begetelah pokona mah.
    Sakali deui nuhun ah kang...

    10 Juli 2009 pukul 21.59  

    Bagus Bung. Tapi, ane bisa liat contoh-contohya ga? Live Demonya gitu....

    Best regards,

    Irfan Melodic Nugroho
    Melodramatic Mind

    Facts on the Recent News

    14 Juli 2009 pukul 07.19  

    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

    15 Juli 2009 pukul 09.16  

    nih artikel aku cari2

    20 Juli 2009 pukul 06.25  

    Makasih..artikel ini yang aku cari selama ini. Aku coba ya..

    22 Agustus 2009 pukul 12.46  

    terimakasih yah sudah berbagi ilmu, saya sebagai pemula sangat membantu untuk mempercantik blog saya, ditunggu artikel yg lainnya, tks

    5 Oktober 2009 pukul 16.47  

    wah tq banget nih atas materi blognya.. gw cobain kok he...

    18 Oktober 2009 pukul 22.51  

    Alhamdulillah, bisa oge ayeunamah ngutip teks di kotak teh,,,nuhun pisan kang.
    Eces, jentre, pertela,,,maenya urang Sunda teu ngarti?!hehe

    6 November 2009 pukul 21.47  

    makasih jadi tau nih nambah ilmu

    10 Desember 2009 pukul 22.19  

    makasih tutorialnya ini sobat saya pakai untuk blog direktori saya

    2 Januari 2010 pukul 15.32  

    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???

    3 Februari 2010 pukul 20.49  

    Thanks Eui...infonya! Biasa baru otak-atik.

    7 Februari 2010 pukul 11.22  

    kk blh minta saran tentang blog aq ngak??
    soal nya banyak yg kurang nie. maklum gaptek..

    12 Februari 2010 pukul 21.50  

    bung enes emang keren... cool

    24 Februari 2010 pukul 10.18  

    artikel sederhana tapi justru artikel ini yang sering kami kunjungi...ckckck ternyata penting banget artikel satu ini

    17 Maret 2010 pukul 15.30  

    makasih info nya..

    keep posting :)

    9 Mei 2010 pukul 11.16  

    Uokey Gan...
    Salam Sukses.

    11 Desember 2012 pukul 05.11  

    simpel, padat dan jelas
    pokokny waowwwww dech
    keren2

    thanks bangatttt ya atas artikelny
    ditunggu artikel berikutny
    :)

    5 Maret 2013 pukul 23.01  

    terimakasih sob, berhasil

    10 Oktober 2013 pukul 17.49  

    thanxs info nya bro....

    salam kenal all...

    28 Oktober 2013 pukul 23.53  

    mantab bung... mampir dong ke blog ane... http://aziz-mukhsin.blogspot.com

    5 Desember 2014 pukul 16.44  

    mantap kak :)
    jangan lupa mampir juga http://bangaoo.blogspot.com

    17 Februari 2015 pukul 08.36  

    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/

    21 Maret 2015 pukul 06.24  

    kalo kotak scripnya 3 atau lebih dalam satu baris bisa ngga? caranya gimana?

    4 Februari 2016 pukul 15.13  

    Gimana nih? @bahrianapz

    5 April 2016 pukul 03.52  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler