Cara Membuat Script Box Keren di Postingan Blog

Salin

Cara Membuat Kotak Scroll di HTML Blog - Dalam dunia blogging, script box atau kotak skrip menjadi salah satu komponen yang sangat sering dibutuhkan dalam penulisan artikel blog. Terlebih lagi bagi mereka yang menerapkan niche atau topik seputar teknologi dan coding.

Apa itu Script Box?

Dari katanya saja, mungkin sudah terbayang dipikiran Anda tentang 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).

Pada dasarnya, elemen pembungkus tersebut sangat mirip dengan syntax highlighter. Yang membedakan dua komponen tersebut hanya dari segi pemasangan, selebihnya bisa dikatakan mirip. Untuk lebih jelasnya, berikut adalah perbedaan dari dua komponen tersebut:

Ini ditampilkan dengan syntax highlighter

Ini ditampilkan dengan script box

Nah bagaimana teman-teman, sangat mirip bukan?

Membuat kotak script bisa dikatakan sangat mudah. Dengan banyaknya jenis tampilan yang bisa digunakan, Anda akan bebas memilih tampilan yang sesuai dengan keinginan Anda.

Namun sebelum mengaplikasikan pembahasan kali ini, ada baiknya untuk mengetahui terlebih dahulu manfaat yang bisa dihasilkan bagi pembaca maupun mesin pencari.

Kelebihan Menggunakan Script Box

Memudahkan pembaca dan mesin pencari dalam memahami konten tulisan
Tulisan menjadi lebih rapi
Tulisan menjadi lebih terstruktur.

Setelah mengetahui pengertian dan kelebihan yang bisa didapatkan, berikut adalah daftar tampilan lengkapnya. Pilihlah yang memang sesuai dengan keinginan Anda agar tulisan menjadi lebih menarik.

Script Box Keren Dasar

Tampilan 1

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

Tampilan 2

<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 3

<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 4

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

Tampilan 5

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

Tampilan 6

<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 7

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

Tampilan 8

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

Tampilan 9

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

Tampilan 10

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

Tampilan 11

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

Tampilan 12

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

Tampilan 13

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

Script Box Keren Variasi

1. Button

2. 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. Soft

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

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

Catatan

Untuk memberikan fitur scroll, gunakan atribut overflow: auto; height: 150px; width: 100%
background-color = Warna latar belakang
background-image = Warna latar belakang untuk menambahkan gradiasi
color = Warna konten
border = Garis pinggir
border-radius = Ketumpulan garis pinggir
padding = Jarak konten dengan garis pinggir
text-align = Arah awal konten
Silahkan atur kumpulan kode di atas dengan tampilan yang Anda inginkan.

Penutup

Walaupun tidak seefektif syntax highlighter, namun tidak ada salahnya untuk mencoba script box tersebut. Selain karena banyaknya jenis tampilan yang bisa digunakan, fitur ini juga memiliki ukuran yang kecil sehingga dapat dimuat dengan cepat pada saat pemuatan halaman.

Untuk memberikan segala kemudahan bagi Anda semua, saya akan selalu mengupdate artikel ini apabila ada jenis tampilan terbaru yang cocok digunakan. Oleh karena itu, jangan sampai ketinggalan teman-teman.

Cukup sekian artikel tentang Cara Membuat Script Box Keren di Postingan Blog ini, Terima kasih.

Ferisp.com