Cara Membuat Script Box Kotak Keren di Postingan Blog

Cara Membuat Kotak di Postingan Blog - Jika anda seorang penulis didunia blogging, script kotak atau box skrip menjadi salah satu bagian yang sangat sering diperlukan dalam penulisan artikel blog. Apalagi untuk mereka yang menerapkan niche atau topik seputar teknologi dan coding ataupun resep masakan.

Lau, Apa itu Script Box?

Berdasarkan katanya saja, anda sudah bisa membayangkan dipikiran Anda mengenai pengertian dan definisi dari elemen tersebut. Ya, script box atau kotak skrip adalah elemen kotak yang bertugas untuk membungkus tulisan yang ada di dalamnya (biasanya berupa skrip atau kode).

Secara fundamental, elemen pembungkus script ini sangat mirip dengan syntax highlighter. Adapun perbedaan kedua komponen tersebut hanya dari segi pemasangan, selebihnya dapat dibilang mirip. Agar lebih jelas, berikut merupakan perbedaan dari dua komponen tersebut:

Ini ditampilkan dengan syntax highlighter

Ini ditampilkan dengan script box

Baiklah, bagaimana kawan-kawan, sangat mirip bukan?

Cara membuat kotak script bisa dikatakan sangat gampang. Terdapat ada banyak jenis tampilan yang dapat digunakan, Anda dengan bebas memilih tampilan yang sesuai dengan kebutuhan Anda.

Akan tetapi sebelum menerapkan asikan pembahasan kali ini, sebaiknya anda memahami terlebih dahulu manfaat yang bisa dihasilkan bagi pembaca maupun mesin pencari.

Berikut Kelebihan Menggunakan Script Box

1. Mempergampang pembaca dan mesin pencari dalam memahami konten tulisan
2. Tampilan tulisan menjadi lebih rapi
3. Dekorasi tulisan menjadi lebih terstruktur.

Selepas mengetahui pengertian dan kelebihan yang anda dapatkan, dibawah ini adalah daftar tampilan lengkapnya. Pilihlah yang memang sesuai dengan keinginan Anda agar tulisan menjadi lebih menarik.

Script Box Keren Dasar

Tampilan pertama (I)

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan kedua (II)

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan ketiga (III)

<div style="background-color: #f6f6f6; border: 1px solid #009ee0; border-radius: 0 10px 10px 0; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan keempat (IV)

<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan kelima (V)

<div style="background-color: #f6f6f6; border-top: 5px solid #009ee0; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan keenam (VI)

<div style="background-color: #f6f6f6; border-top: 5px solid #009ee0; border-left: 5px solid #009ee0; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan ketujuh (VII)

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

Tampilan kedelapan (VIII)

<div style="background-color: #f6f6f6; border: 5px solid #009ee0; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan kesembilan (IX)

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

Tampilan kesepuluh (X)

<div style="background-color: #f6f6f6; border: 5px #009ee0 Double; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan kesebelas (XI)

<div style="background-color: #f6f6f6; border-left: 5px #009ee0 Double; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan kedua belas (XII)

<div style="background-color: #f6f6f6; border: 3px #009ee0 dotted; padding: 17px; text-align: left;">
Script di sini...
</div>

Tampilan ketiga belas (XIII)

<div style="background-color: #f6f6f6; border-left: 3px #009ee0 dotted; padding: 17px; text-align: left;">
Script di sini...
</div>

Script Box Keren Variasi

A. Tombol (Button)

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All" /></div><div align="center"></div><br /><div align="center"><textarea name="txt" readonly="true" style="font-size: small; padding: 17px; font-family: Fira Mono; height: 100px; width: responsive;">Script di sini...

B. Gelap (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>

3. Ringan (Soft)

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

4. Miring (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>

Keterangan untuk anda perhatikan

1. Dalam memberikan fitur scroll, gunakan atribut overflow: auto; height: 150px; width: 100%
2. arti background-color = Warna latar belakang
3. arti background-image = Warna latar belakang untuk menambahkan gradiasi
4. arti color = Warna konten
5. arti border = Garis pinggir
6. arti border-radius = Ketumpulan garis pinggir
7. arti padding = Jarak konten dengan garis pinggir
8. arti text-align = Arah awal konten
9. Anda boleh atur kumpulan kode di atas dengan tampilan yang Anda inginkan.

Penutup

Meskipun tidak sama efektifnya dengan  syntax highlighter, akan tetapi tidak ada salahnya untuk mencoba script box ini. Alasannya karena banyaknya jenis tampilan yang dapat digunakan, fitur ini juga mempunyai ukuran yang kecil sehingga bisa dimuat dengan cepat pada saat loading halaman.

Agar memperoleh segala kemudahan untuk Anda semua, saya akan selalu mengupdate artikel ini apabila ada jenis tampilan terbaru yang cocok diterapkan. Oleh karena itu, jangan sampai ketinggalan kawan-kawan.

Demikian  sekian artikel tentang Cara Membuat Script Kotak (Box) Keren di Postingan Blog ini, Terima kasih.