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 

31 komentar:

  1. makasih bro, sangat membantu !

    BalasHapus
  2. Makasih gan, langsung praktek dan hasilnya mantep :D

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

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

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

    BalasHapus
  6. informasi seperti ini yang kami cari

    BalasHapus
  7. baru ketemu cara nya trimakasih gan sudah saya coba

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

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

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. ini pake template apa? buat bingung aja gan

    BalasHapus
    Balasan
    1. hehe...Ini tempate hasil dari otak atik template mas Brow

      Hapus
  12. membuat kotak spesifikasi produk buat online shop gmn bang??

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

    BalasHapus

Jika ada sembarang pertanyaan silahkan komentar disini.