CARA MEMBUAT KOTAK / BINGKAI DI BLOG

Sekarang saya akan menjelaskan CARA MEMBUAT KOTAK / BINGKAI DI BLOG. Kalau kamu telusuri di internet tentang cara membuat tulisan dalam kotak di mesin pencari seperti google.com, maka akan banyak sekali bermunculan judul tersebut. Namun kali ini saya coba merangkumnya sedemikian rupa. Untuk menerapkan kotak/bingkai tersebut di dalam sebuah postingan blog.

Dalam membuat sebuah artikel/ postingan baru di blog maka kamu harus menulis lewat Edit HTML dan bukan dari Compose. Caranya adalah dengan mengkopi scrip yang saya tulis ini, lalu kamu paste ke dalam HTML, berikut langkah langkahnya :

  
   KOTAK / Bingkai Berbentuk Border
 kodenya:
<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#FBFBEE; text-align: left;">TULISAN YANG KAMU INGINKAN</div>
 hasilnya:

TULISAN YANG KAMU INGINKAN

   KOTAK /  Bingkai Berbentuk 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.

kodenya:

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

hasilnya:

TULISAN YANG KAMU INGINKAN

   KOTAK / Bingkai Berbentuk Text Area

Cara ini adalah cara yang paling sering saya gunakan karena sangat ringkas. Dan kalau ada kesalahan pada HTML-nya, maka akan sangat mudah untuk meng-edit-nya.

  Keterangan :

    Angka 5 warna biru menunjukan lebar kekanan kotak

    Angka 50 warna merah menunjukkan panjang kebawah kotak.

kodenya:

<textarea rows="5" cols="50">TULISAN YANG KAMU INGINKAN</textarea>
 hasilnya:

TULISAN YANG KAMU INGINKAN

    KOTAK / Bingkai berbentuk Titik-titik

kodenya:

<div style="overflow:no; width:100%px; height:100%px; border:6px dotted #8B0000; padding: 4px;">TULISAN YANG KAMU INGINKAN</div>
 hasinya:

TULISAN YANG KAMU INGINKAN

    KOTAK / Bingkai berbentuk Garis Putus-putus

kodenya:
<div style="overflow:no; width:100%px; height:100%px; border:6px dashed #8B0000; padding: 4px;">TULISAN YANG KAMU INGINKAN</div>

hasilnya:

TULISAN YANG KAMU INGINKAN

    KOTAK / Bingkai berbentuk Garis Double

kodenya:

<div style="overflow:no; width:100%px; height:100%px; border:6px ridge #8B0000; padding: 2px;">TULISAN YANG KAMU INGINKAN</div>
 hasilnya:

TULISAN YANG KAMU INGINKAN

Note:

Pada kalimat TULISAN YANG KAMU INGINKAN yang berwarna merah silahkan kamu ganti dengan kalimat yang sesuai keinginan  kamu .

Sedang kan tabel untuk membuat daftar isi juga terdiri dari kotak, jika anda ingin mengetahui nya lebih jelas silahkan klik disini CARA MEMBUAT TABEL PADA BLOG ATAU HTML
Semoga artikel ini bermanfaat, wasalam.