CARA MEMBUAT KOTAK SKRIPT DI POSTINGAN BLOG TANPA RIBET DAN PRAKTIS

Hi Blogkoopers, Berjumpa lagi dengan artikel yang berjudul Cara Membuat Kotak Skrip atau Box Script pada Blog

Dalam dunia blogging, script box atau kotak skrip merupakan salah satu komponen yang sering dibutuhkan saat menulis postingan blog. Terutama bagi mereka yang menerapkan niche atau topik seputar teknologi dan coding.

DAFTAR ISI

1. Pengertian
2. Kelebihan
3. Script
4. Akhir Kata

Apa itu kotak skrip?

D

ari teks saja, Anda mungkin sudah membayangkan arti dan definisi elemen-elemen ini di benak Anda. Ya, scriptbox atau scriptbox adalah elemen kotak yang tugasnya membungkus teks (biasanya script atau kode) di dalamnya. Membuat script box bisa dikatakan sangat mudah. Dengan begitu banyak jenis monitor yang tersedia, Anda bebas memilih yang tepat untuk Anda.

Manfaat dan Kelebihan

Namun sebelum pembahasan aplikasi ini, ada baiknya untuk mengetahui terlebih dahulu manfaat yang bisa dibawa kepada pembaca dan mesin pencari. Berikut keuntungan menggunakan Script Box:

• Mempermudah pembaca dan mesin pencari untuk memahami konten tertulis 
• Menulis menjadi lebih rapi 
•  Menulis menjadi lebih teratur.

Dengan pemahaman tentang implikasi dan keuntungan yang bisa diperoleh, berikut daftar lengkap perspektifnya. Pilih salah satu sesuai keinginan Anda agar tulisan menjadi lebih menarik.

Script

Skript Kotak Keren Dasar

 
Style 1

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

Scriptnya disini...

</div>

Style 2

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

Scriptnya disini...

</div>

Style 3

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

Scriptnya disini...

</div>

Style 4

<div style="background-color: #f6f6f6; border-left: 5px solid rgb(0, 158, 224); padding: 17px; text-align: left;">

Scriptnya disini...

</div>

Style 5

<div style="background-color: #f6f6f6; border-top: 5px solid rgb(0, 158, 224); padding: 17px; text-align: left;">

Scriptnya disini...

</div>

Style 6

<div style="background-color: #f6f6f6; border: 5px solid rgb(0, 158, 224); padding: 17px; text-align: left;">

Script di sini...

</div>

Style 7

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

Script di sini...

</div>

Style 8

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

Script di sini...

  </div>

Font box Keren Variasi

1. Button

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

2. Dark

 

<div style="background-color:#2c323c; color:#fff; border-left:5px solid #800000; 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>

Catatan :

• Untuk menyediakan pengguliran, gunakan properti overflow: auto; height: 150px; width: 100%
• background-color= warna-latar belakang 
• background-image = warna latar belakang untuk menambahkan gradien 
• color = warna konten 
• border = garis pinggir batas
• border-radius = tumpul garis pinggir batas 
• padding = jarak dari konten ke perbatasan 
• text-align = orientasi awal konten 
• Silakan atur kode di atas ke tampilan yang Anda inginkan.

Akhir Kata

Meskipun tidak seefektif penyorot sintaks, tidak ada salahnya untuk mencoba kotak skrip. Selain beragamnya tipe tampilan yang bisa digunakan, fitur ini juga memiliki ukuran yang kecil sehingga cepat dimuat saat halaman dimuat. Sekian dulu mengenai artikel Cara Membuat Script Box di Halaman Postingan Blog. Semoga bermanfaat . Terimakasih