Home » Tutorial Blogging » Cara Membuat Berbagai Macam Kotak Background

Cara Membuat Berbagai Macam Kotak Background

Nah kali ini saya akan berbagi  Cara Membuat Berbagai Macam Kotak Background Di Postingan, lagi-lagi si nyawabaru ini akan memposting postingan agak basi hehee..., tapi biar gimana pun saya yakin masih ada di antara miliaran umat yang masih mencari postingan seperti ini walaupun hanya segelintir orang terutama sang NEWBIE seperti saya ini.
Tanpa panjang lebar langsung aja ke TKP ceekidot..

Jika sobat ingin menampilkan kotak background di dalam postingan atau halaman baru sobat,sobat bisa mengcopy code berikut.dan di dalam kotak background sobat bisa megisi dengan tulisan atau  kode HTML/Script yang sudah di parse terlebih dahulu agar bisa muncul di dalam kotak background.
membuatnya cukup mudah sob, silahkan sobat pilih berbagai macam kotak backgroud di bawah ini dan copas codenya.


Ini dia codenya.

Solid
<div style="border: 2px #2BA94F solid; padding: 10px; background-color: #800080; text-align: left;"> KODE/TEKS</div>
KODE/TEKS


Dotted
<div style="border: 2px #2BA94F dotted; padding: 10px; background-color: #800080; text-align: left;">KODE/TEKS</div>
KODE/TEKS

Dashed
<div style="border: 2px #2BA94F dashed; padding: 10px; background-color: #800080; text-align: left;">KODE/TEKS</div>
KODE/TEKS

Double
<div style="border: 2px #2BA94F double; padding: 10px; background-color: #800080; text-align: left;"> KODE/TEKS</div>
KODE/TEKS

Grove
<div style="border: 4px #2BA94F groove; padding: 10px; background-color: #800080; text-align: left;">KODE/TEKS</div>
KODE/TEKS

Outset
<div style="border: 4px #2BA94F outset; padding: 10px; background-color: #800080; text-align: left;">KODE/TEKS</div>
KODE/TEKS

Ridge
<div style="border: 2px #2BA94F ridge; padding: 10px; background-color: #800080; text-align: left;">KODE/TEKS</div>
KODE/TEKS

Scroll
<div style="border: 4px #2BA94F solid; padding: 10px; background-color: #800080; overflow: auto; height: 50px; width: 300px; text-align: left;">KODE/TEKS</div>
KODE/TEKS

Insert
<div style="border: 4px #2BA94F inset; padding: 10px; background-color: #800080; text-align: left;">KODE/TEKS</div>
KODE/TEKS


Catatan:
border adalalah warna bagian samping.
background warna bagian tengah.
silahkan anda berkreasi sendiri.
Untuk scroll di atas memang tidak terlihat scrollnya di karenakan teks/code yang ada di dalamnya tidak melebihi kotak yang tersedia.
Contoh jika teks/kode melebihi kotak yang tersedia.:

<div style="background-color: purple; border: 4px #2BA94F solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
<li>KODE/TEKS
</li>
<li>KODE/TEKS
</li>
<li>KODE/TEKS
</li>
<li>KODE/TEKS
</li>
<li>KODE/TEKS </li>
</div>


  • KODE/TEKS
  • KODE/TEKS
  • KODE/TEKS
  • KODE/TEKS
  • KODE/TEKS

    • Semoga hal basi ini bisa bermafaat buat sobat semua.

    Artikel Terkait Tutorial Blogging

    Label: