Cara Membuat Script Box di Postingan Blog (Tampil Berwarna)

Cara Membuat Script Box di Postingan Blog – Didunia blogging, script box atau kotak skrip merupakan salah satu komponen yang sering dibutuhkan saat menulis artikel blog. Apa lagi jika blog tersebut menerapkan niche atau topik seputar teknologi dan coding.

Apa Itu Script Box ?

Jika dilihat dan dibaca, mungkin sudah terbayang dalam pikiran Anda tentang pengertian dan definisi dari Script Box tersebut. Membuat Script box atau kotak skrip merupakan elemen kotak yang ditugaskan untuk membungkus tulisan yang ada di dalamnya (biasanya berupa script dan kode).

Umumnya, elemen pembungkus ini sangat mirip dengan Syntax highlighter . Yang jadi pembedaan antara dua komponen tersebut hanya dari segi pemasangan, lebih dari itu bisa dikatakan mirip. Untuk detail lebih jelasnya, berikut ini adalah perbedaan dari dua komponen tersebut:

Script ini ditampilkan dalam Syntax highlighter.

Bagaimana ? Jika dilihat dari kedua kode tersebut cukup mirip bukan ?

Membuat script box bisa dikatakan cukup mudah. Terdapat banyak jenis tampilan yang bisa digunakan, Anda juga bebas memilih tampilan yang seperti apa sesuai dengan keinginan Anda.

Kelebihan Membuat Script Box

1. Memudahkan Pengunjung dan Mesin Pencari Untuk Memahami Jenis Konten Tulisan
2. Artikel Menjadi Lebih Rapi
3. Tulisan Tertata dengan Rapi

Dengan begitu artikel anda akan menjadi lebih menarik ketika dibaca oleh pengunjung dari mesin pencari maupun sosial media.

2 Cara Membuat Script Box Keren di Blog

Terdapat 2 versi Cara Membuat Script Box yaitu dengan Script Box Dasar dan Script Box Variasi. Silahkan dipilih ingin menggunakan script box yang dasar atau variasi sesuai dengan keinginan anda.

13 List Membuat Script Box Dasar

Setelah mengetahui penjelasan, pengertian, dan kelebihan yang bisa anda dapatkan, berikut ini adalah list tampilan lengkapnya. Silahkan dipilih sesuai dengan keinginan Anda agar tulisan menjadi lebih menarik.

Tampilan Script Box Dasar 1

Tampilan Script Box Dasar 2

Tampilan Script Box Dasar 3

Tampilan Script Box Dasar 4

Tampilan Script Box Dasar 5

Tampilan Script Box Dasar 6

Tampilan Script Box Dasar 7

Tampilan Script Box Dasar 8

Tampilan Script Box Dasar 9

Tampilan Script Box Dasar 10

Tampilan Script Box Dasar 11

Tampilan Script Box Dasar 12

Tampilan Script Box Dasar 13

List Membuat Script Box Variasi

Setelah Melihat Script Box Dasar di atas apabila masih kurang memuaskan, maka dibawah ini ada beberapa list Script Box Variasi yang akan membuat tulisan kamu lebih berwarna daripada sebelumnya.

Dark

<div style="background-color: #2c323c; color: #fff; border-left: 5px solid #800000; padding: 17px; text-align: left;">Script di sini...
</div>

<div style="background-color: #2c323c; color: #fff; border-left: 5px solid #800000; border-radius: 0 10px 10px 0; padding: 17px; text-align: left;">
Script di sini...
</div>

<div style="background-color: #2c323c; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;">
Script di sini...
</div>

Soft

<div style="background-color: #e6f7ff; border-radius: 10px; padding: 17px; text-align: left;">
Script di sini...
</div>

Gradient

<div style="background-image: linear-gradient(to right, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;">
Script di sini...
</div>

<div style="background-image: linear-gradient(to bottom, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;">
Script di sini...
</div>

Note

1. Untuk memberikan fungi scroll, silahkan gunakan atribut overflow: auto; height: 150px; width: 100% pada script
2. background-color = Silahkan sesuaikan Warna latar belakang dengan keinginan anda
3. background-image = Warna latar belakang untuk menambahkan gradient
4. color = Warna konten script
5. border = Garis pinggir script
6. border-radius = Ketumpulan garis di pinggir
7. padding = Jarak konten anda dengan garis pinggir
8. text-align = Arah awal script
9. Silahkan atur list kode di atas dengan tampilan yang Anda ingin gunakan.

Itulah 2 Cara Membuat Script Box Keren di Blog. Silahkan dipilih ingin Membuat Script Box Dasar / Script Box Variasi sesuai dengan kesukaan anda. Saya pribadi lebih menyukai Membuat Script Box Variasi karena menjadi lebih berwarna.

Jika ada pertanyaan tentang Cara Membuat Script Box dengan variasi keren di Blog silahkan tanyakan di kolom komentar.

cara-membuat-script-box

Originally posted 2022-09-27 17:17:12.