Cara Membuat Script Box dalam Postingan Blog

Cara Membuat Kotak Script dalam Postingan Blog - pada kesempatan kali ini kami ingin menyajikan tutorial cara membuat script box pada postingan blog, kotak skrip atau script box juga sangat penting jika kamu ingin membuat postingan blog tutorial bahasa program komputer atau yang berhubungan tentang seputar niche coding dan tekno.

Apa itu Script Box?

Script Box adalah kumpulan kode-kode perintah yang disusun didalam kotak atau box, bisa disebut Script Box sebagai pembungkus tulisan kode-kode bahasa program, Script Box juga mirip dengan syntac highlighter yang menjadi pembeda dari kedua tersebut hanya dari segi pemasangan. 

adapun cara pembuatan Script Box itu sangatlah mudah lhoo, ada banyak juga model-model tampilan yang bisa kamu pasang pada postingan blogger ataupun wordpress, pada kesempatan kali ini kamu bebas memilih tampilan sesuai selera kamu untuk postingan blog kamu, pililah tampilan Script Box sesuai dengan tema blog kamu ya

Sebelum kamu memasang Script Box pada postingan blog kamu, alangkah baiknya kamu mengetahui dulu manfaat dari pemasangan Script Box ini untuk pembaca blog kamu ataupun mesin pencari

Kelebihan Memasang Script Box

1. Memudahkan pembaca blog dalam memahami isi konten
2. Mesin pencari seperti google dapat memahami isi konten
3. Isi konten menjadi terstruktur
4. Isi konten jadi lebih rapi

setelah tau manfaat memasang Script Box, berikut ini adalah daftar tampilan Script Box yang dapat kamu pilih sesuai keinginan agar tampilan blog kamu lebih menarik di mata pembaca

Daftar Script Box Dasar

Model 1

Model 2

Model 3

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

Model 4

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

Model 5

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

Model 6

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

Model 7

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

Model 8

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

Model 9

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

Model 10

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

Model 11

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

Model 12

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

Model 13

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

Daftar Script Box Variasi Lain

1. Gadient

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

2. Soft

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

3. Dark

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

Note:

Kesimpulan

Walaupun tidak seperti syntax highlighter, tidak dosa juga untuk mencoba pasang Script Box pada postingan blog, banyaknya model tampilan Script Box yang bisa kamu gunakan, Script Box ini juga memiliki ukuran yang kecil sehingga tidak mempengaruhi loading blog lambat.

Mungkin cukup sampai disini yang bisa kami sampaikan dalam artikel cara bikin script box di postingan blog, thanks so much