Cara Mudah Buat Kotak/Border Warna di Blog dengan HTML dan CSS

Cara Mudah Buat Kotak/Border Warna dengan HTML dan CSS di Blog- Selamat pagi shobat Mas Arif. Kembali lagi saya menyapa shobat semua. pada kesempatan ini saya ingin membagikan postingan Tutorial membuat kotak di postingan dengan HTML dan CSS.

Pastinya shobat sering menjumpai di dalam postingan ada borders atau kotak yang di dalamnya ada tulisannya bukan?

Cara Mudah Buat Kotak/Border Warna di Blog dengan HTML dan CSS

Membuat Kotak/Border Text dengan html/css Memang cukup lazim digunakan di blog tutorial dan sejenisnya untuk menaruh script html/CSS di dalam postingan. Kode HTML dan CSS untuk membuat border text juga banyak dibagikan secara gratis di blog-blog.

Kenapa saya kasih istilah kotak?

Maksudnya kotak disini bukan kotak persegi ya, tapi kotak disini adalah border/batas  yang biasa disebut teks area in. Sekali lagi border text area ini biasa digunakan untuk paste code HTML/ CSS ataupun Teks sejenisnya. Kotak ini secara atomatis akan menyesuaikan panjang ruangan postingan blog kalau tidak puas dengan warnanya silahkan di ganti sendiri :

Langkah Mudah Membuat Border/Text Area di Postingan Blog

sebelum mulai untuk praktek membuat border/text area pada postingan, saya sarankan shobat siapkan dulu:

#beberapa alat dan bahannya:

1. Notepad dan sejenisnya
2. Artikel baru yang mau diujicoba untuk diselipkan border/text area
Cara Mudah Meamsang Border/Text area

Silahkan shobat langsung praktekkan, berikut cara memasang border/ext area paa postingan blog:

1. Login blog shobat, jangan login ke blog mantan ea. hehe
2. Buat postingan baru (untuk ujicoba)
3. Copi code HTML yang saya sediakan di bawah
4. Paste kode html tersebut kedalam HTML
Note : taruh kode pada Postingan  bukan Compose, tapi pada edit HTML
5. Save, lalu lihat hasilnya dengan klik Compose

Script HTML Border/Tex area


<p style="border: solid 1px #eceff5; background: #29447E; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Isi Text Disini Bos!</p>

<p style="border: solid 1px #29447E; background: #8a9ac5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Isi Text Disini Bos!</p>

<p style="border: dashed 2px #eceff5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">Isi Text Disini Bos!</p>

<p style="border: solid 1px #333; background: #999; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">Isi Text Disini Bos!</p>

<p style="border: solid 1px #aaa; background: #ccc; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">Isi Text Disini Bos!</p>

<p style="border: dashed 2px #ee3f10; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">Isi Text Disini Bos!</p>

<div style="border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 50px; width: 630px; text-align: left;">Isi Text Disini Bos!</</div>

<div style="border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;"> Isi Text Disini Bos!</</</div>

Jika sudah dirasa shobat oke dengan hasil kotak/text area yang dibuat. silahkan isi kotak tersebut sesuai dengan kebutuhan shobat. Tidak perlu khawator karena ukuran kotak/border text area akan secara otomatis menyesuaikan dengan isinya.

Keterangan :

- Silahkan Ganti tylisan " Isi Text Disini Bos!" dengan tulisan yang mau diposting
- Warna Kuning adalah tebal border (silahkan ganti warna sesuai kebutuhan)
- Warna Merah dan Biru  adalah warna bacground dan border (silahkan ganti warna sesuai kebutuhan)
- Warna Hijau adalah warna tulisan/ teks (silahkan ganti warna sesuai kebutuhan)


Penutup

Demikianlah Tutorial Cara Mudah Buat Kotak/Border Warna dengan HTML dan CSS di Blog. Silahkan praktekkan tutorialnya. Semoga postingan ini bisa bermanfaat buat shobat semua. Silahkan baca juga artikel menarik lainnya di blog Mas Arif. Terimakasih

Disqus Comments