Cara Membuat Text Box untuk menulis Script/Kode

Hallo, What'ssupp mhaa Brooh! Pada kali ini saya akan membagikan artikel kepada teman-teman semuanya tentang cara membuat text-box untuk menulis script atau kode.

Sebelumnya saya juga sempat bingung, bagaimana sih cara untuk membuat text-box untuk menulis script yang panjang tanpa menampilkan terlalu banyak text atau huruf di bagian wrapper atau isi artikel.

Cara Membuat Text Box untuk menulis Script/Kode



Sebenarnya cara membuat text-box ini tidak terlalu susah jika teman-teman sudah mempelajari ilmu dasar html. Namun, tidak banyak diantara kita termasuk saya sendiri mempelajari terlebih dahulu tentang ilmu tersebut, tapi itu tidak menjadi masalah kok.. karena saya akan membagikan sedikit ilmu dasar html khususnya di Text-box.

Gambar contoh - Script Text-Box (BroHabir)

Manfaat Script Text-Box

Manfaat dari script text-box ini sendiri, berfungsi sebagai box atau kotak yang dimana dikotak tersebut terdapat scroll-box yang membuat text yang berada di box tersebut bisa dituliskan sepanjang-panjangnya script tanpa menampilkan banyak text pada wrapper atau isi artikel..

Oke, tanpa panjang lebar mari kita lihat bagaimana cara membuat text box untuk menulis script/kode berikut ini...

Script Text-Box 1

<!-------- Contoh 1 Script Text-Box Original by https://brohabir.blogspot.com/-------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->

<div style="background-color: #111; border-radius: 5px height: 100px; overflow: auto; padding10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 2

<!-------- Contoh 2 Script Text-Box Original by https://brohabir.blogspot.com/-------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->

<div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 3 

<!-------- Contoh 1 Script Text-Box Original by https://brohabir.blogspot.com/-------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->

<div style="background-color: #3d3627; border-radius: 0px; border: 1px solid #000; height: 100px; overflow: auto; padding10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 4

<!-------- Contoh 2 Script Text-Box Original by https://brohabir.blogspot.com/-------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->

<div style="background-color: #000; border-radius: 0px; border: 2px dashed #fff; height: 100px; overflow: auto; padding10px; text-align: left; width: auto;">
<br /></div>

Script Text-Box 5

<!-------- Contoh 2 Script Text-Box Original by https://brohabir.blogspot.com/-------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->

<div style="background-color: #2b3b44; border-radius: 0px; border: 2px dotted #fff; height: 100px; overflow: auto; padding10px; text-align: left; width: auto;">
<br /></div>


CARA PENGGUNAAN

PERHATIAN !!!
Cara penggunaan script text-box ini tidak sembarangan. Maka dari itu, berikut ini adalah cara penggunaannya:

Blogger Menu → Postingan → Entri Baru (Tempat anda menulis artikel) → Salin kode diatas mulai dari <div hingga </div> → Paste di HTML (Terletak disebelah Compose) → Buka Compose → Isi Box baru ditulis Script atau kodenya.

Selesai... Jadi enggak susah-susah amat kan? Hanya cara penggunaannya saja yang perlu diperhatikan... Oke, cukup segini saja artikel tentang membuat text-box untuk menulis Script atau kode ... Jika ada yang membingungkan, silahkan sobat komentar dibawah..

Salam Brother!

26 Komentar untuk "Cara Membuat Text Box untuk menulis Script/Kode"

  1. hapus aja height: 100px; nya bro... agar script keseluruhan dilihat secara langsung, bukan scroll dulu atas-bawah... itu sih saranku...

    BalasHapus
    Balasan
    1. Trimakasih bro atas sarannya,.. Mengenai height ini memang disengaja 100px yang dimana fungsinya agar tidak menampilkan script yang terlalu panjang pada isi artikelnya...

      Hapus
  2. Background color bisa diubah ya. Boleh nih infonya. Terima kasih.

    BalasHapus
    Balasan
    1. Yap.. Tetapi nanti color pada teksnya disesuaikan dengan backgroundnya, agar script yang ditulis nampak jelas...

      Hapus
    2. Bir, aku lagi nyoba ni.. Tapi ndk nampak kode e.. Bantu bir

      Hapus
    3. Kalau background hitam jangan pulak tulisan e hitam... ubah color font e jadi putih/abu"

      Hapus
  3. Info penting ni, dibookmark dulu yaa. Thanks ya

    BalasHapus
  4. Nyimak deh hihi ... Sambil memahami. Krna, kayaknya lbh mudah kupahami kalo ada video kwkw. *udh banyak minta nih aku kwkwkw.

    Hummm gak kok, aku nerima aja *krna emang harus hihi.
    Makash infonya. Semoga aku bsa belajar banyak hal tentanf dunia blog hehe

    BalasHapus
    Balasan
    1. Trimakasih atas masukkannya kak, Selamat datang diwebsite saya.. Bersama kita belajar

      Hapus
    2. Hihi iya sama" belajar. Aku masih awam banget urusan kek gini hihi

      Hapus
  5. kalau saya menyebutkan teks scrol, sehingga nanti bisa scrol kebawah. Menghemat ruang post.

    BalasHapus
    Balasan
    1. Iya Om Koodok, buat menghemat ruang artikel..

      Hapus
  6. saya selalu kagum dengan blogger tutorial secara saya nggak bisa utak atik blog template nggak diubah sama sekali dari aslinya

    BalasHapus
    Balasan
    1. Sebenarnya tampilan itu hanya sebagai penarik saja, kalau isinya maknyus dan bermanfaat insyaAllah kayak punya om banyak juga peminatnya.. Semangat!!

      Hapus
    2. terimkasih dek atas semangatnya

      Hapus
  7. Jadi bisa menghemat ruang di postingan kalau memakai text box bila menulis kode script

    BalasHapus
  8. jadi lebih rapi ya gan tampilan kode script yang diposting di blog, sehingga pembaca bisa dengan mudah untuk memahaminya ;)

    BalasHapus
    Balasan
    1. Iya bg zunif, biar tulisan script tidak mengaruhi tulisan pokok bahasannya...

      Hapus
    2. pembaca bisa lebih fokus pada pokok tulisan ya gan, sehingga script kode tidak mengganggu pembaca karena sudah tertata dengan baik ;)

      Hapus
  9. Waahh!! Cukup menarik nih gan..Sepertinya harus dicoba..Ok thanks atas tutorialnya..😄😄

    BalasHapus
    Balasan
    1. Sama-sama, Terimakasih sudah berkunjung!

      Hapus
  10. Wah sangat bermanfaat nih. Makasih mas, jadi tampilannya tidak tinggi, kemudian ada fasiltias scroll gitu yah ?

    BalasHapus
  11. Sedikit rempong, tapi hasilnya kece, kapan2 saya bikin di blog deh, sekarang bookmark aja dulu nih blog :)

    BalasHapus

"Sebaik-baiknya netizen, ia yang memiliki adab berkomentar"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel