Cara Membuat Kotak Script Di Dalam Postingan Blog!

Gabutngeblog.com – Ingin memasukkan Kode Script Html tapi belum tau caranya supaya rapi? Berikut ini Cara membuat kotak script di dalam postingan blog yang akan saya ajarkan.

Sebelum lanjut mari kita bahas dulu, Kotak Script atau Text Box Html itu apasih?

Pengertian Kotak Script atau Text Box Html

Kotak script atau text box adalah sebuah kotak yang berisi Tulisan ataupun Script code.

supaya terlihat rapi dan teratur pada sebuah postingan di blogspot, wordpress, atau website.

Sehingga pengunjung pun nyaman ketika sedang membaca artikel yang ada di situs web tersebut. Untuk memasang / membuat kotak html blog kita hanya perlu memasukkan / menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Ini adalah contoh kotak script di dalam postingan blog

Kali ini saya akan share bagaimana Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru.

kita akan membuat Text Box Keren di blog yang berfungsi sebagai pemanis supaya terlihat Rapi dan lebih profesional.

Cara Mudah Membuat Kotak Script Di Dalam Postingan Blog Terbaru

  • Cara membuat teks html seperti contoh di atas cukup mudah.
  • Silahkan Masuk ke dashboard dan buat Postingan Baru.
  • Silahkan isi Judul Sesuai Keinginan kemudian Alihkan Ke mode Html.
Membuat Kotak Script Di Dalam Postingan Blog
  • Setelah itu Masukkan Kode Script Berikut kedalam Postingan Artikel Kamu.
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">.Masukkan Kode Script Disini.</div>

Silahkan isi Kode Script Html ataupun Tulisan kedalam Kotak Script tersebut.

  • Berikutnya silahkan kembali ke mode compose/Tampilan menulis untuk melihat hasil kotak Script, Supaya lebih jelas silahkan buka di Pratinjau.
hasil kotak Script di dalam postingan blog

Jika kamu ingin menambahkan Scroll silahkan Tambahkan kode berikut.

 height: 100px; width: 520px; overflow: auto;
<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">.Masukkan Kode Script Disini.</div>
Note: Jika ingin mengubah ukuran silahkan ubah angka di Height: Tinggi dan Width: Lebarnya
  • Jika sudah silahkan Publish artikelnya dan lihat hasilnya. Cukup mudah bukan?

Berikut adalah pilihan text box / kotak script berbagai macam bentuk dan warna yang bisa Kamu gunakan agar terlihat lebih keren dan profesional.

Kumpulan Kode Script HTML Untuk Membuat Text Box atau Kotak Script di dalam postingan Blog

Note: sebagai catatan Kode Text Box HTML Di bawah ini Tidak Menggunakan Scroll, Silahkan menambahkan kode pada Tutorial nomor 4.

<div style=”border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;”> Masukin Tulisan Disini</div>
 
<div style=”border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;”> Masukin Tulisan Disini</div>
Pilih Sesuai Keinginan.
<div style=”border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;”> Masukin Tulisan Disini</div>
 
<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;”>Masukin Tulisan Disini</div>
Beberapa Kotak Script
<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;”>Masukin Tulisan disini</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;”>Masukin Tulisan Disini</div>
Dipilih
<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;”>
masukin Tulisan disini</div>
 
<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;”>Masukin Tulisan Disini</div>
 
<div style=”border: 3px #1780dd Double; padding: 10px; background-color: #ffffff; text-align: left;”>Kode Script Sobat Disini</div>
<div> </div>
 

Penutup

Nah tadi itulah tutorial singkat yang bisa kamu ikuti. Jangan lupa share jika menurutmu ini bermanfaat.

sekian dan terimagaji!

Tinggalkan komentar