Cara Membuat Script Box Keren di Postingan Blog

Feris Prayuda
Oktober 11, 2020
Cara Membuat Script Box Keren di Postingan Blog

Ferisp.com - Dalam dunia blogging, script box atau kotak skrip menjadi salah satu komponen yang sangat sering dibutuhkan oleh seorang blogger. Terlebih lagi bagi mereka yang menerapkan niche atau topik seputar teknologi, coding, atau semacamnya. Script box sendiri berguna agar tulisan menjadi lebih rapi dan membuat pembaca lebih mudah memahami informasi yang sedang disampaikan.

Pengertian Script Box atau Kotak Skrip

Bagi yang belum tahu saja, script box adalah kotak script yang digunakan untuk membungkus konten yang ditulis di dalam komponen tersebut. Konten tersebut bisa berupa script atau kode, kalimat penting, dan catatan khusus.

Pada dasarnya, komponen tersebut sangat mirip dengan artikel saya sebelumnya tentang syntax highlighter. Yang membedakan kedua komponen tersebut hanya dari segi pemasangan, selebihnya bisa dikatakan mirip. Untuk lebih jelasnya, perhatikan contoh di bawah ini:

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 contoh yang bisa digunakan, Anda bebas memilih tampilan yang sesuai dengan keinginan Anda.

Lalu, apa sih keuntungan menggunakan script box?

Sebelum mengaplikasikan pembahasan kali ini, ada baiknya untuk mengetahui terlebih dahulu fungsi yang bisa didapatkan baik terhadap pengunjung maupun mesin pencari.

Keuntungan dan Kelebihan

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

Setelah mengetahui pengertian dan keuntungan yang bisa didapatkan, berikut adalah contoh tampilan yang bisa digunakan. Pilihlah yang memang benar-benar sesuai dengan keinginan Anda agar tampilan tulisan menjadi lebih baik dan menarik.

Jenis Tampilan

Tampilan 1

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

Script di sini...

Tampilan 2

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: white; border-left: 5px solid #009ee0; overflow: auto; padding: 10px; t-align: left;">
Script di sini...
</div>
Hasil

Script di sini...

Tampilan 3

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: white; border-top: 5px solid #009ee0; overflow: auto; padding: 10px; t-align: left;">
Script di sini...
</div>
Hasil

Script di sini...

Tampilan 4

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: white; border-top: 5px solid #009ee0; border-left 5px solid: #009ee0; overflow: auto; padding: 10px; t-align: left;">
Script di sini...
</div>
Hasil

Script di sini...

Tampilan 5

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-left: 5px solid rgb(0, 158, 224); border-radius: 10px; padding: 10px; t-align: left;">
Script di sini...
</div>
Hasil

Script di sini...

Tampilan 6

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-radius: 10px; border: 4px solid rgb(0, 158, 224); padding: 10px; t-align: left;">
Script di sini...
</div>
Hasil

Script di sini...

Tampilan 7

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white; border-radius: 10px; border: 5px outset #fff; padding: 10px; t-align: left;">
Script di sini...
</div>
Hasil

Script di sini...

Tampilan 8

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

Script di sini...

Tampilan 9

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

Script di sini...

Tampilan 10

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #2c323c; border-left: 5px solid rgb(0, 158, 224); height: 100px; overflow: auto; padding: 10px; t-align: left; width: auto;">
<span style="color: white; font-family: courier; font-size: x-small;">
Script di sini...
</span>
</div>
Hasil

Jadi, ini adalah contoh script box yang telah diberikan fitur scroll. Untuk menambahkan fitur scroll tersebut, Anda hanya perlu untuk memberikan atribut height, overflow, dan width.

Jika masih bingung, berikut adalah contohnya:

height: 100px, overflow: auto, width: auto

Tampilan 11

<div style="border: 2px solid #009ee0; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 1000%;">
Script di sini...
</div>
</div>
Hasil

Jadi, ini adalah contoh script box yang telah diberikan fitur scroll. Untuk menambahkan fitur scroll tersebut, Anda hanya perlu untuk memberikan atribut height, overflow, dan width.

Jika masih bingung, berikut adalah contohnya:

height: 100px, overflow-x: scroll, overflow-y: scroll, width: auto

Tampilan 12

<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="height: 100px; auto; width: responsive;">
Script di sini...
</textarea>
</div>
</form>
</div>
Hasil


Catatan

  1. Untuk menambahkan fitur scroll, silahkan menambahkan atribut height, overflow, dan width
  2. Untuk mengatur warna latar belakang, ubah nilai dari kode background-color
  3. Untuk mengatur warna dan tebal border, ubah nilai dari kode border dan solid
  4. Jangan lupa menggunakan warna tulisan yang terang apabila menggunakan latar belakang yang gelap agar tulisan lebih mudah dibaca.

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.