Selasa, 07 Juni 2022

Cara Membuat Kotak Kode Script HTML di Blog dengan Mudah

Mungkin anda sebagai blogger baru pernah melihat web atau blog yang menampilkan kode html didalam Kotak atau Text Box yang berisi tutorial atau tips yang harus diikuti oleh pengunjung atau yang melihatnya. 

Saya akan memberikan tutorial bagaimana anda bisa meniru atau menampilkan Kode Script di dalam postingan blog anda dengan mudah. Tetapi sebelum itu saya akan menjelaskan apa sih yang dimaksud Kotak Kode Script itu?

Kotak script atau yang biasa para blogger sebut yaitu text box area adalah sebuah kotak yang di dalam nya dapat dimasukkan tulisan atau script code baik yang biasa maupun dengan fungsi scroll agar 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.

Jika sudah jelas dan sudah terbayang apa itu Kotak Kode Script mari kita lanjut ke inti artikel ini yaitu bagaimana cara menempatkan kode HTML atau Script di dalam postingan. 

Cara Membuat Kotak Script Di Postingan :

1. Langkah pertama, buat postingan baru di blog anda. 

Cara Membuat Kotak Kode Script HTML di Blog

 2. Selanjutnya, Rubah ke halaman HTML. Cara mengubahnya anda cukup klik icon pensil di bawah JUDUL, lalu pilih TAMPILAN HTML

Cara Membuat Kotak Kode Script HTML di Blog 2

3. Setelah itu, Masukkan kode berikut ini : 

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
.Masukkan Kode Script Sobat Disini.</div>

#Ganti tulisan warna merah dengan script atau tulisan yang akan anda masukkan dalam kotak

Jika sudah klik kembali tanda pensil dan pilih kembali Tampilan Menulis. Hasil akan terlihat seperti ini :

Cara Membuat Kotak Kode Script HTML di Blog 3

Jika anda ingin menggunakan scroll pada kotak script tersebut, anda hanya tinggal menambahkan  kode yang berwarna biru seperti di bawah ini :

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">
.Masukkan Kode Script Sobat Disini.</div>

Anda bisa mengatur ukuran tinggi dan lebar sesuai keinginan anda dengan mengganti angka height dan angka width. 

Tampilan diatas merupakan hasil normal atau sederhana. Jika anda ingin merubah atau mengganti kotak kode script dengan yang lebih menarik, saya akan memberikan beberapa kode script lainnya sebagai berikut : 

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

Hasil Tampilan Kode Script Lain ke 1

<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;">Kode Script Sobat Disini</div>

Hasil Tampilan Kode Script Lain ke 2

<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;">Kode Script Sobat Disini</div>

Hasil Tampilan Kode Script Lain ke 3

Sekian informasi tutorial tentang blogger pemula. Saya harap dengan informasi diatas menambah pengetahuan anda dan mempercantik tampilan blog anda.