Cara membuat Kotak/ border untuk code HTML/ CSS

Apa kabar? mudah-mudahan sehat ya? Oiya sobat kesempatan kali ini saya ingin berbagi tutorial sebagaimana judul artikel diatas. Sebenarnya artikel ini sudah saya jelaskan sebelumnya tapi mungkin masih kurang puas. Nah kali ini gak perlu repot-repot untuk membuatnya tinggal pilih mana suka. Kotak ini sengaja saya 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 an kalau tidak puas warna yang telah saya tentukan silahkan di ganti sendiri :

Cara Pemasangan :
untuk hasil maksimal

1. Kopi code berikut dan paste kedalam HTML Postingan  ingat bukan Compose
    edit code jika ingin mengganti warna bacground, teks dan border serta tebal tipis border
2. Untuk melihat hasilnya klik Compose
3. Jika sudah oke, silahkan kopi paste code, teks dll. kedalam kalimat Cobah-cobah ( supaya kodenya tidak  
    berantakan kalimat cobah-cobah blok terlebih dahulu contoh : Cobah- Cobah kemudian kopi code yang
    hendak di masukkan kemudian paste kedalam kalimat Cobah-cobah.
4. Selanjutnya setelah code dipaste kedalam kotak/border, Blok semua code didalam kotak ( seperti contoh kalimat cobah-cobah 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 :
- COBAH- COBAH - Ganti dengan code atau teks yang akan ditampilkan
- Warna Orange dan Biru  adalah warna bacground dan border 
- Warna merah adalah warna tulisan/ teks
- Warna hijau adalah tebal border

CODE 1

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

CODE 2 

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

CODE 3

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

CODE 4

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

CODE 5 ( bacground otomatis mengikuti latar postingan blog )

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

CODE 6

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

Oke itu aja sobat moga bermamfaat