Cara Membuat Kotak Tempat Kode Script Dilengkapi Scroll Pointer Pada Posting Blog

Cara Membuat Kotak Tempat Kode Script Dilengkapi Scroll Pointer Pada Posting Blog

Sobat blogger yang gemar menulis artikel di blog anda masing-masing tentunya pernah mengalami masalah kesulitan dalam menaruh kode sejenis script html atau script bahasa pemrograman lain. Yah memang merepotkan dan banyak memakan space tempat posting apabila kode script tersebut terlalu panjang. Oleh karenanya pada postingan kali ini saya akan memberikan cara membuat kotak untuk kode script pada posting blog agar mempermudah dan menghemat tempat dalam posting artikel blog anda. 

Sehingga dengan menggunakan kotak tersebut tampilan artikel menjadi lebih rapi dan enak untuk dilihat mata seperti pada artikel saya sebelumnya. Ada banyak tipe kotak untuk tempat kode script tersebut tapi disini saya akan membahas yang paling fleksibel dan sering digunakan oleh para blogger. Langsung saja berikut caranya

• Copy kode dibawah ini

<div style="border: 1px #808080 solid; padding: 10px; background-color: Gainsboro; overflow: auto; height: 200px; width: 600px; text-align: left;">Masukkan kode disini!</div>

• Masuk ke menu entri baru post blog dan paste pada HTML bukan Compose 

• Atur tampilan kotak sesuai keinginan

• Masuk pada menu Compose lalu masukkan script kode yang ingin anda letakkan dalam kotak pada tulisan yang bertanda merah.

Berikut cara untuk mengatur tampilan kotak dari kode diatas:

1. Mengganti tebal garis tepi kotak, ubah angka sesuai keinginan pada "border: 1px"

2. Mengganti warna garis tepi, ubah kode warna berikut "#808080"

3. Mengganti jenis garis tepi, bisa berupa garis putus=dashed atau titik=dotted pada "solid"

4. Mengganti warna background dalam kotak, ubah nama warna yang anda inginkan tentunya memakai english ya, ubah pada kode berikut "background-color: Gainsboro"

5. Mengganti lebar/panjang kotak, ubah angka pada "width: 600px"

6. Mengganti tinggi kotak, ubah angka pada "height: 200px"

7. Mengganti perataan tulisan pada kotak, ubah jenis perataan tulisan seperti rata tengah=center atau rata kanan=right pada "text-align: left"

Setelah menerapkan cara diatas dengan demikian tampilan kode script pada blog anda lebih tertata dan tidak memakan tempat.

Semoga bermanfaat!