Cara Membuat Text Box Di Postingan Blog Dengan Cepat


Halo teman-teman kali ini saya akan sharing tentang tips blog, yaitu cara membuat text Box di blog dengan cepat. Tapi sebelum masuk kedalam pembahasan apakah kalian tau apa itu Text Box ? kalau belum simak penjelasannya dibawah ini.

Text Box adalah sebuah tempat atau kolom yang dapat menampung atau menyimpan teks agar tidak tercampur oleh teks lain, dan memudahkan para visitor atau pengunjung blog kita untuk menyalin teks yang berada pada kolom text Box. Biasanya text box digunakan untuk menyimpan kode script. 

Lalu apa sih keuntungan atau manfaat menggunakan text box ? Keuntungan menggunakan text box adalah dapat menyingkat teks panjang, mempermudah pembaca untuk menyalin teks, dan juga agar membuat postingan kalian terlihat rapi.

Baiklah, mari kita lanjut ke pembahasan Cara Membuat Text Box Di Blog Dengan Cepat di bawah ini.

Cara Membuat Text Box Di Blog

Untuk Membuatnya silahkan kalian ikuti langkah-langkah berikut ini :

Buka Blogger > Buat entri baru > Lalu pilih mode HTML (Bukan Compose)



Kemudian Copy kode berikut :


<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left; height: 100px; width: 600px; overflow: auto;">Kode Script Kalian Disini</div>



Kalian Paste pada kolom html dan nanti hasilnya akan seperti berikut : 


Kode Script Sobat Disini





Lalu kalian pindah ke mode compose dan masukan teks yang kalian, selesai.

Note : 

  1. Apabila kalian ingin mengubah ukuran kotak text box tersebut kalian bisa edit pada bagian height: 100px; width: 600px; overflow: auto ( Height = Tinggi, Width = Lebar ) 
  2. Apabila kalian tidak ingin menggunakan scroll kalian hanya cukup menghapus pada bagian height: 100px; width: 600px; overflow: auto 
Disini saya juga menyediakan text box dengan berbagai macam warna dan bentuk. Oke langsung aja kalian lihat di bawah ini.

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;">Tulis Disini Gan</div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Tulis Disini Gan</div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Tulis Disini Gan</div>


<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;">Tulis Disini Gan</div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Tulis Disini Gan</div>


<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;">Tulis Disini Gan</div>


<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;">Tulis Disini Gan</div>

Oiya apabila kalian ingin menggunakan mode scroll kalian cukup menambahkan kode height: 100px; width: 600px; overflow: auto ( Setelah kode text-align: left; )


Penutup :

Oke mungkin cukup disini saja tentang Cara Membuat Text Box Di Postingan Blog Dengan Cepat semoga bermanfaat bila kalian mempunyai kendala masalah atau mempunyai tips tambahan, silahkan disampaikan pada kolom komentar terimakasih.

Post a Comment

1 Comments