Cara Terbaik Membuat Kotak Text Dalam Artikel/Postingan Pada Blog

Assalamualaikum warahmatullah wabarakatuh

Kali ini saya akan membahas mengenai cara create/membuat kotak text pada artikel/postingan suatu blog. fungsi ini sering digunakan untuk script atau penegasan suatu text.
Membuat kotak text daam suati artikel atau postingan sangat diperlukan untuk memberi penegasan/tanda bahwa ini loh text yang perlu dan penting.

Langsung saja ya...kita menuju ke TKP.

• Login terlebih dahulu di Blogger,, kemudian pilih "Pos" kemudian pilih "Entri Baru"

• Silahkan masukkan script/code berikut

"<div style="background-color: white; border: 3px #26e514 Double; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 640px;"> Masukkan artikel/Text/postingan saudara disini </div>"

Berikut adalah penjelasan dari code/scriptnya, silahkan ganti sesuai selera.

• Text yang berwarna Hijau adalah tempat untuk memasukkan tulisan/artikel saudara, silahkan masukkan tulisan saudara disitu.
• Tanda " berwarna merah harus dihilangkan
• Background-color: white adalah code untuk warna background didalam kotak, berikut adalah contohnya jika saya ubah "white" menjadi "yellow"

"<div style="background-color: yellow; border: 3px #26e514 Double; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 640px;"> Masukkan artikel/Text/postingan saudara disini </div>"

• Border:3px adalah code untuk ketebalan garis border/garis kotak, berikut adalah contohnya jika saya ubah codenya dari "3px" menjadi "6px"

"<div style="background-color: white; border: 6px #26e514 Double; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 650px;"> Masukkan artikel/Text/postingan saudara disini </div>"

• #26e514 adalah code untuk warna garis border/warna garis kotak, silahkan copy code tersebut dan masukkkan pada mesin pencari google disini..perhatikan gambar berikut.

• Angka 1 pada gambar diatas adalah pilihan warna yang diinginkan dengan menggeser ke kiri dan kekanan, Angka 2 pada gambar diatas adalah pilihan warna dari yang paling terang sampai yang paling gelap dari warna pada angka 1 tadi, Angka 3 pada gambar diatas adalah code dari warna yang telah dipilih... silahkan copy code tersebut dan masukkan pada script/code kotak text diatas. hasilnya adalah seperti ini.

"<div style="background-color: white; border: 3px #e514d4 Double; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 640px;"> Masukkan artikel/Text/postingan saudara disini </div>"

• Double; adalah code untuk model garis border/garis kotak, kode ini bisa dihilangkan jika tidak ingin menampilkan garis kotak/garis border tersebut. anda bisa menggant kode dari model garis border tersebut sesuai selera. silahkan ganti dengan salah satu kode berikut :

dotted
dashed
double
groove
ridge
inset
outset

• Saya coba ganti kode "Double" dengan "inset" maka hasilnya seperti ini

"<div style="background-color: white; border: 3px #26e514 inset; height: 90px; overflow: auto; padding: 10px; text-align: left; width: 640px;"> Masukkan artikel/Text/postingan saudara disini </div>"

• Height: 200px; dan Width: 450px; adalah code dari tinggi dan lebar dari garis border/garis  kotak, saya coba ganti menjadi "height: 100px" dan "width: 300px"
• Overflow: auto; adalah code untuk membuat/menambahkan scroll jika ukuran kotak lebih kecil dari textnya.

"<div style="background-color: white; border: 3px #26e514 Double; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 300px;"> Masukkan artikel/Text/postingan saudara disini </div>"

• Padding: 10px; adalah code untuk jarak antara content/text dengan border/garis blok, code ini sama dengan "Margins" pada Microsoft Word". anda bisa menghilangkan atau mengubah ukuran dari padding ini.

"<div style="background-color: white; border: 3px #26e514 Double; height: 90px; overflow: auto; text-align: left; width: 640px;"> Masukkan artikel/Text/postingan saudara disini </div>"

• Text-align: left; adalah code untuk posisi tulisan/text yang ada di dalam kotak, anda bisa menggunakan code berikut left, right, center, atau justify..
• Kali ini saya coba gunakan Text-align: center;

"<div style="background-color: white; border: 3px #26e514 Double; height: 90px; overflow: auto; padding: 10px; text-align: center; width: 640px;"> Masukkan artikel/Text/postingan saudara disini </div>"

Gampang kan.?.
Itulah penjelasan tentang cara membuat kotak text dalam artikel/postingan suatu blog, semoga dengan penjelasan diatas dapat berguna bagi teman-teman sekalian...
Jika ada yang kurang jelas, silahkan bertanya..

Salam

Artikel Terkait