Cara Membuat Script Kotak di Blogger
Minggu, 20 Februari 2022
Di dunia blogging, kotak script atau kotak script adalah salah satu komponen yang sangat sering diperlukan untuk menulis artikel blog. Terlebih lagi bagi mereka yang menerapkan niches atau topik tentang teknologi dan pengkodean.
Apa Itu Kotak Skrip ?
Dari katanya, mungkin telah dibayangkan dalam pikiran Anda tentang pengertian dan definisi nama. Kotak skrip atau kotak skrip adalah elemen kotak yang ditugaskan untuk menulis tulisan di dalamnya, biasanya dalam bentuk skrip atau kode.
Pada dasarnya, elemen pembungkus sangat mirip dengan sintaks highlighter. Apa yang membedakan kedua komponen hanya dalam hal instalasi, sisanya dapat dikatakan sama.
Membuat kotak skrip dapat dikatakan sangat mudah. Dengan banyaknya jenis tampilan yang dapat digunakan, Anda akan bebas memilih tampilan yang cocok untuk Anda.
Tetapi sebelum menerapkan diskusi kali ini, lebih baik mengetahui manfaat yang dapat diproduksi untuk pembaca dan mesin pencari.
Keuntungan Menggunakan Kotak Skrip
- Memfasilitasi pembaca serta mesin pencari dalam memahami konten penulisan.
- Postingan jadi lebih rapi.
- Tulisan jadi lebih terstruktur.
Setelah mengetahui makna dan keunggulan yang dapat diperoleh, berikut adalah daftar tampilan lengkap. Pilih itu memang sesuai dengan keinginan Anda sehingga tulisan menjadi lebih menarik.
Kotak Skrip Dasar
View 1
<div style="background-color: #f6f6f6; border: 1px solid #009ee0; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 2
<div style="background-color: #f6f6f6; border: 1px solid #009ee0; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 3
<div style="background-color: #f6f6f6; border: 1px solid #009ee0; border-radius: 0 10px 10px 0; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 4
<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 5
<div style="background-color: #f6f6f6; border-top: 5px solid #009ee0; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 6
<div style="background-color: #f6f6f6; border-top: 5px solid #009ee0; border-left: 5px solid #009ee0; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 7
<div style="background-color: #f6f6f6; border-left: 5px solid #009ee0; border-radius: 10px; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 8
<div style="background-color: #f6f6f6; border: 5px solid #009ee0; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 9
<div style="background-color: #f6f6f6; border-radius: 10px; border: 5px outset #fafafc; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 10
<div style="background-color: #f6f6f6; border: 5px #009ee0 Double; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 11
<div style="background-color: #f6f6f6; border-left: 5px #009ee0 Double; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 12
<div style="background-color: #f6f6f6; border: 3px #009ee0 dotted; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
View 13
<div style="background-color: #f6f6f6; border-left: 3px #009ee0 dotted; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
Kotak Skrip Variasi
Tema Gelap
<div style="background-color: #2c323c; color: #fff; border-left: 5px solid #800000; padding: 17px; text-align: left;">
letaknya 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;">
Letakkan Script di sini...
</div>
<div style="background-color: #2c323c; color: #fff; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
Tema Lembut
<div style="background-color: #e6f7ff; border-radius: 10px; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
Tema Gradien
<div style="background-image: linear-gradient(to right, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
<div style="background-image: linear-gradient(to bottom, #eeffe6, #fce6f8); border-radius: 10px; padding: 17px; text-align: left;">
Letakkan Script di sini...
</div>
Footnote
- Untuk menambahkan fitur scroll, gunakan atribut "overflow: auto; height: 150px; width: 100%"
- Warna latar belakang = "background-color"
- Warna latar belakang untuk menambahkan gradiasi = "background-image"
- Warna konten = "color"
- Garis pinggir = "border"
- Ketumpulan garis pinggir = "border-radius"
- Jarak konten dengan garis pinggir = "padding"
- Arah awal konten = "text-align"
- Harap atur kumpulan kode di atas dengan tampilan yang Anda inginkan.
Penutupan
Meskipun tidak sebanding dengan sintaks highlighter, tidak ada salahnya untuk mencoba kotak skrip. Terlepas dari jumlah jenis tampilan yang dapat digunakan, fitur ini juga memiliki ukuran kecil sehingga dapat dimuat dengan cepat saat memuat halaman.
Cukup banyak artikel tentang cara membuat skrip box di blogger ini, terima kasih, semoga sukses, dan semoga bermanfaat...
#cara membuat kotak script di blog, #script html membuat kotak, #cara membuat kotak script dalam postingan blog, #membuat kotak dengan html, #membuat kotak pada html, #cara membuat kotak html, #cara membuat kotak pada html, #script membuat box, #cara membuat box script di blog, #membuat script, #membuat script html, #cara membuat script, #cara membuat script html, #cara membuat script website,