Cara Membuat Kotak teks (Text Box) di Postingan Blog [Wordpress dan Blogspot]

Saat ini banyak para blogger yang ingin mempercantik tampilan blog mereka, terutama untuk bagian postingan blog, salah satunya biasanya mereka menambahkan kotak teks (text box) sebagai background (latar belankang) dari paragraf tertentu didalam sebuah postingan blog.

Selain itu text box juga digunakan sebagai bacground untuk sebuat link/ url penghubung antara satu posting ke posting yang lain.

Ada beberapa bentuk dari kotak text yang akan saya bagikan ke sobat kali ini, mari kita simak beberapa bentuk dari kotak text lengkap dengan kode html

Cara membuat kotak text / background untuk tulisan di artikel blog [wordpress & blogspot]:

1. Masuk / Login ke akun Blogger sobat
2. Pilih ENTRI BARU
3. Buatlah tulisan tulisan
4. Kemudian Pilih HTML, pada pojok kiri atas
5. Masukan  salah satu  Kode dibawah
6. Kemudian Compose
7. Setelah itu copy tulisan yang telah anda buat
8. Dan Paste ke dalam kotak text 



Berikut kotak teks untuk post di blog dengan Border (bingkai/garis batas)

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">masukan tulisan anda disini</div>

Keterangan:

• border: 3px merupakan ketebalan garis pinggir kotak teks 
• #1780dd warna garis batas/ pinggir kotak teks 
• Double adalah bentuk dari garis batas pada pinggir kotak teks  
• padding: 10px merupakan panjang kotak teks dari atas ke bawah 
• background-color:#ffffff adalah warna latar belakan dari kotak teks 
• text-align: left  posisi kotak teks (text box) di bagian sisi kir

Berikut dibawah ini script bentuk bentuk kotak teks :
 

masukan tulisan anda disini (Dotted).

Kode Html:
<div style="background-color: white; border: 3px #1780dd dotted; padding: 10px; text-align: left;">
masukan tulisan anda disini (Dotted)</div>

masukan tulisan anda disini (Dashed)

<div style="background-color: white; border: 3px #1780dd dashed; padding: 10px; text-align: left;">
masukan tulisan anda disini (Dashed)</div>

masukan tulisan anda disini (Solid)

<div style="background-color: white; border: 3px #1780dd solid; padding: 10px; text-align: left;">
masukan tulisan anda disini (Solid)</div>

masukan tulisan anda disini (Groove)

<div style="background-color: white; border: 3px #1780dd groove; padding: 10px; text-align: left;">
masukan tulisan anda disini (Groove)</div>

masukan tulisan anda disini (Inset)

<div style="background-color: white; border: 3px #1780dd inset; padding: 10px; text-align: left;">
masukan tulisan anda disini (Inset)</div>

masukan tulisan anda disini (Ridge)

<div style="background-color: white; border: 3px #1780dd ridge; padding: 10px; text-align: left;">
masukan tulisan anda disini (Ridge)</div>

masukan tulisan anda disini (outset)

<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;">
masukan tulisan anda disini (outset)</div>

Untuk kode script html kotak text yang tidak memiliki border dibawah ini script htmlnya:

Tanpa Border

Kode script html:
 
<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">
masukan text disini
</div>

Demikian bentuk bentuk kotak text yang dapat saya bagikan jika ada bentu yang lebih baru yang sobat tahu silahkan disharing kepada kawan semua