Cara buat kotak tulisan [ Text Box ] di Blog

Hallo Sobat Ulasan Tutor. Kali ini kita akan membagikan tips bagaimana cara membuat Text Box pada Sebuah Blog, Text Box sendiri berguna untuk mencantumkan sebuah teks ke dalam kotak yang gunanya agar pembaca dapat terfokus dari kalimat yang di cantumkan ke dalam kotak tersebut. Dari pada kamu penasaran, ayo langsung saja kita masuk ke Tutorialnya.

1. Text Box background berwarna :

Ulasan Tutor adalah situs Blogger terkeren yang pernah ada

Untuk membuat teks tercantum ke dalam kotak berbackground warna seperti di atas, kamu hanya perlu menyalin kode yang ada di dalam kotak di bawah ini.

<div style="background-color: #d3d3d3; padding: 10px; text-align: justify;">tulisan kamu di sini</div>

Ubahlah kata-kata [ tulisan kamu di sini ] dengan kata yang ingin kamu tampilkan. Untuk mengubah tampilan warna background, maka kamu hanya perlu mengganti kata [ #d3d3d3 ] dengan kode warna RGB dan harus di awali dengan icon sebagai contoh kode #ffffff untuk menampilkan warna putih.

2. Text Box background berwarna + bingkai garis strip :

Tempat baca artikel tentang komputer? Ulasan tutor tempatnya

Untuk membuat teks tercantum ke dalam kotak background warna di tambah hiasan bingkai garis strip seperti di atas, kamu hanya perlu menyalin kode yang ada di dalam kotak di bawah ini.

<div style="background-color: #d3d3d3; border: 2px dashed #000000; padding: 10px; text-align: left;">tulisan kamu di sini</div>

Cara ubah warnanya sama saja seperti pada nomor 1 namun kamu dapat mengubah warna garis bingkai strip dengan mengubah kode #000000 dengan kode warna lain sebagai contoh kode #ffffff untuk menampilkan warna putih.

3. Text Box background berwarna + bingkai titik-titik :

Bagikan Artikel ini ke semua orang, agar banyak yang mendapatkan manfaatnya

Untuk membuat teks tercantum ke dalam kotak background warna di tambah hiasan bingkai titik-titik seperti di atas, kamu hanya perlu menyalin kode yang ada di dalam kotak di bawah ini.

<div style="background-color: #d3d3d3; border: 2px dotted #000000; padding: 10px; text-align: left;">tulisan kamu di sini</div>

Cara ubah warnanya sama saja seperti pada nomor 2 namun kamu dapat mengubah warna bingkai titik-titik dengan mengubah kode #000000 dengan kode warna lain sebagai contoh kode #ffffff untuk menampilkan warna putih.

4. Text Box dapat di Scroll Vertikal :

Hai, Kamu tau gak Tanggal 08 November 2022 hari apa ? [ yang tau tau aja ] hehehe 😄 | Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal - Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal - Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal - Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal - Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal - Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal - Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal.

Untuk membuat teks tercantum ke dalam kotak dan dapat di scroll secara Vertikal seperti di atas, kamu hanya perlu menyalin kode yang ada di dalam kotak di bawah ini.

<div style="background-color: white; border: 2px solid #0180cf; height: 70px; overflow: auto; padding: 5px; width: auto;">
  tulisan kamu di sini
</div>

Untuk Nomor 4, tidak ada yang perlu di ubah.

5. Text Box dapat di Scroll vertikal & Horizontal

I Love You Cewe Inisial L 😍 hehehe | Maaf ya sob, Admin nih situs rada bucin.

Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal & Horizontal

Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal & Horizontal 

Text ini panjang dan berulang untuk membuktikan bahwa teks nya bisa di scroll Vertikal & Horizontal 

Untuk membuat teks tercantum ke dalam kotak dan dapat di scroll secara Vertikal & Horizontal seperti di atas, kamu hanya perlu menyalin kode yang ada di dalam kotak di bawah ini.

<div style="border: 2px solid #0180cf; height: 70px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 1000%;">
tulisan kamu di sini</div>
</div>

Untuk Nomor 5 juga tidak ada yang perlu di ubah.

Oke Sobat Ulasan Tutor, itulah di atas adalah cara mencantumkan teks di sebuah kotak. Semoga artikel kali ini bermanfaat untuk kalian semua yang membaca ya. Kami Smart Creator pamit undur diri dan Salam...

Posting Komentar

Berkomentarlah dengan bijak dan menjaga etika karena setiap perkataan mencerminkan Jati diri anda!

Lebih baru Lebih lama