Cara membuat Kotak untuk Text ataupun Kode HTML di Blog

Dalam pembuatan Blog kita memang diwajibkan harus memperbagus ataupun memperindah di setiap laman ataupun di setiap post artikel yang akan kita buat agar terlihat lebih rapi dan professional dan juga SEO,selain artikel yang orisinil dan dengan tampilan widget dan desain yang kita buat rapi dan professional tetapi dari sisi artikel dalam penulisan dan penataan artikel yang kita tulis agar terlihat lebih rapi dan jelas maka kita memerlukan sesuatu hal yang harus kita buat agar terlihat rapi dan professional dalam penulisan artikel kita di blog.

Maka dari itu saya akan membagikan Kode HTML beserta CSSnya untuk memperindah artikel yang anda ketik dan akan terlihat lebih jelas agar pengunjung tidak bingung dengan maksud dari penulisan artikel anda itu sendiri.Langsung saja saya jelaskan Kode apa saja yang anda perlukan untuk pembuatannya dan bagaimana caranya,untuk lebih jelasnya lihat gambar dibawah ini:Anda Masuk dulu ke blog anda,dan buat entri(post baru) atau artikel baru..

Gambar disamping contoh sebelum anda memasukkan Kodenya:
1.Kotak yang berwarna Merah untuk memasukkan kodenya,(note:kodenya bisa anda masukkan dimana ajh intinya Kotak yang ingin tempatkan dimana,nah disitu anda menempatkan kodenya)
2.Panah Hitam;Ketika anda ingin membuat artikel pasti ke menu compose nah untuk memasukkan kode HTMLnya anda ke Menu HTML(yang saya beri tanda panah Hitam)

Nah kalau untuk Kode-Kode dalam membuat kotaknya bisa anda baca Kode-Kode yang diperlukan dalam permbuatan Kotak-Kotakny ada dibawah Ini,Untuk Kotaknya,sama sesuai dengan Kotak yang saya Buat untuk Kode-kode HTML nya:
1.Untuk Kode HTML kotak:

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #1600D8; text-align: left;">....Here......</p>

Catatan,Untuk Kode #1600D8=kode untuk background pada kotak anda jadi anda harus perhatikan lagi dalam pembuatannya di Blog anda agar tidak terjadi kesalahan dalam pembuatannya,Nah kalau untuk Penempatan Tulisan atau Textnya,bisa anda perhatikan dari kalimat yang saya beri tanda garis bawah ini.....Here.....=Untuk menempatkan tulisan/text yang ingin anda tulis

2.kode Kotak HTML:

<div style="border: 4px #FFE500 double; padding: 10px;background-color:#0800D5;
text-align:left;">....Here.....</div>

Catatan dalam pembuatan Kotak pada Nomor 2 akan saya jelaskan di bawah ini,agar anda lebih jelas dalam pembuatannya dan tidak salah #FFE500=Untuk warna kotaknya,nah kalau untuk ketebalan garis akan saya jelaskan dengan pemberian garis bawah,border: 4px=untuk ketebalan pada garis kotaknya,kalau untuk panjang dari kotaknya padding: 10px=panjang kebawah dari kotaknya kalau untuk penempatan Textnya ...Here...=Untuk menempatkan Textnya kalau untuk warna background dari kotaknya background-color:#0800D5=warna untuk background kotaknya dan untuk pemberian Posisi Textnya text-align:left;">=Posisi Text di dalam kotak(kalau ingin diganti ke arah kanan,ganti Left jadi Right

Nah itulah kode-kode yang dapat anda gunakan dalam pembuatan Kotak di blog atau artikel-artikel anda,karena dengan pemberian Kotak ini kita juga dapat memperjelas apa maksud tujuan atau dalam pemberian Kode-Kode HTML dan CSS ataupun untuk hal lainnya agar pengunjung pun juga dapat memahami apa yang kita maksud dalam pembuatan artikel-artikel yang akan kita buat.