Cara Membuat Kotak Script di Postingan Blog

Seorang blogger pasti akan bosan jika melihat tampilan blognya seperti itu-itu saja. Apalagi jika postingan artikel tersebut terdapat kode script seperti HTML, CSS, atau bahasa pemrograman, akan terlihat kurang rapih jika kode-kode tersebut tidak ditempatkan di tempat khusus seperti kotak box. Selain itu, jika kita menempatkan kode script tanpa ada kotak script yang menjadi pemisah antara artikel dengan kode script, biasanya akan terjadi error atau tidak muncul sama sekali. Oleh karena itu, artikel kali ini akan membahas terkai cara untuk membuat kotak script di antara artikel blog. Komponen kode yang biasanya ada di kotak script adalah seperti berikut

Cara Membuat Kotak Script di Postingan Blog

1. Border
Adalah garis yang membentuk kotak, ketebalan border bisa diatur dengan cara memperbesar nilai px nya

2. Double
Bisa diganti dengan menggunakan kode dashed, ridge, inset, groove, solid, dan dotted

3. Padding
Adalah kode HTML yang berfungsi untuk menentukan lebar ataupun panjang kotak script dengan memperbesar nilai px nya

4. Background Color
Adalah kode HTML yang berhubungan dengan warna dari kotak script.

5. Text Align
Berfungsi untuk merubah posisi text apakah rata kiri, tengah, kanan, atau rata kiri dan kanan

Dan untuk koda HTML nya ada dibawah ini berikut dengan contohnya

<pre style="background-color: lightgreen; border-radius: 0.25rem; box-sizing: inherit; margin-bottom: 1rem; overflow: auto; padding: 1rem;">LETAKKAN KODE SCRIPT DISINI</pre>

<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">LETAKKAN KODE SCRIPT DISINI

<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div> <div align="center"> <br /> <textarea cols="20" name="txt" rows="4" style="height: 50px; width: 200px;" wrap="VIRTUAL">LETAKKAN KODE SCRIPT DISINI

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;">LETAKKAN KODE SCRIPT DISINI</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">LETAKKAN KODE SCRIPT DISINI</div>

<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">LETAKKAN KODE SCRIPT 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;">LETAKKAN KODE SCRIPT DISINI</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">LETAKKAN KODE SCRIPT 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;">LETAKKAN KODE SCRIPT DISINI</div>

Untuk meletakkan kotak script tersebut, pastikan saat menulis artikel berada pada metode HTML bukan metode Compose. Setelah meletakkan kotak script di metode HTML, kalian bisa kembali pada menu Compose, dan memasukkan kode scriptnya. Itulah cara untuk membuat kotak script di artikel blog. Selamat mencoba dan semoga bermanfaat

Bagikan Artikel ini