Cara membuat Kotak/ border untuk code HTML/ CSS

Cara membuat Kotak/ border untuk code HTML/ CSS


kesempatan kali ini Gue ingin berbagi tutorial blog gank sebagaimana judul artikel diatas. Sebenarnya artikel ini sudah pernah saya jelaskan sebelumnya . Nah kali ini gak perlu repot-repot untuk membuatnya tinggal pilih mana yang di suka. Kotak ini sengaja gue siapkan bagi teman-teman blogger yang malas membuat atau mengedit kotak seperti ini hehe...

Istilah kotak, border atau biasa disebut teks area ini ,sering digunakan untuk paste code HTML/ CSS ataupun Teks dll

Kotak ini secara atomatis akan menyesuaikan panjang ruangan postingan blog kalau tidak puas dengan warnanya silahkan di ganti sendiri :


Cara Pemasangan :


  1. Copi code HTML berikut dan paste kedalam HTML Postingan  ingat bukan Compose ya!!.edit code jika ingin mengganti warna bacground, teks dan border serta tebal tipis border
  2. Untuk melihat hasilnya klik Compose.
  3. Jika dirasa sudah oke kotaknya, selanjutnya tinggal copy-paste code/text ke dalam kotak, secara otomatis ukuran kotak akan menyesuaikan.
  4. Selanjutnya setelah code dipaste kedalam kotak/border, Blok semua code/text didalam kotak ( seperti contoh kalimat diatas kemudian pilih ukuran Font/ teks klik NORMAL kemudian pilih ALIGNMET ( posisi teks ) klik paling atas/ kiri. Kemudian klik warna untuk menyesuaikan warna code yang sesuai dengan dengan border/kotak


Keterangan :
- Testing Text area ++++ Ganti dengan code atau teks yang akan ditampilkan
- Warna Merah dan Biru  adalah warna bacground dan border
- Warna Hijau adalah warna tulisan/ teks
- Warna Kuning adalah tebal border


<p style="border: solid 1px #eceff5; background: #29447E; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Coba coba</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">Coba coba</p>


<p style="border: solid 1px #29447E; background: #8a9ac5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">Coba coba</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">Coba coba</p>


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


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


<div style="border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 50px; width: 300px; text-align: left;">TULIS KODE/SCRIPTNYA DISINI </div>


<div style="border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;"> TULIS KODE/SCRIPTNYA DISINI </div>


Sekian postingan Cara membuat Kotak/ border untuk code HTML/ CSS, jangan lupa gank!! baca juga mengenai cara Membuat Komentar Tanpa Efek Scroll dan Efek Spoiler dan cara Recent Comments dengan Efek Spoiler. semoga bermanfaat. Selamat Mencoba.
Rizqi Makbul

Share this

More

Related Posts

Subscribe to: Post Comments (Atom)