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 

30 komentar

Really Nice Information,Thank You Very Much For Sharing.
Wordpress Development Company

makasih bro, sangat membantu !

Makasih gan, langsung praktek dan hasilnya mantep :D

Oke sama sama Good Luck kawan

Oke Tanks To, good Luck

Oke sama sama kawan, sukses

Oke sama sama, good Luck

sumpah, ini sangat bermanfaat dan sudah saya terapkan di blog saya :D kunjungi balik ya gan :D

asyikkk..
bisa mempercantik postingan bentuk-bentuk seperti ini..
saya sedot ya gan, heehehe..

asyikkk..
bisa mempercantik postingan bentuk-bentuk seperti ini..
saya sedot ya gan, heehehe..

informasi seperti ini yang kami cari

Terimakasih.... Sangat membantu

baru ketemu cara nya trimakasih gan sudah saya coba

terimakasih atas informasinya sangat bermanfaat ini yang saya cari berhasil di blog saya thx

ini baru namanya blog, thanks banget buat mu bro, andaikan ada kasih bintang kayak app store, bintang 5 buat mu

This comment has been removed by the author.

ini pake template apa? buat bingung aja gan

membuat kotak spesifikasi produk buat online shop gmn bang??

mas gimana buat judlu seperti mas yang bergerak itu "Pembelajaran, Media Dan Teknologi" tolong dibalas

Jika ada sembarang pertanyaan silahkan komentar disini.

KOMENTAR TERBARU