SEDERHANA 2: Cara Membuat Kotak Script Unik Dalam Postingan Blog

Membuat dan memasang kotak untuk kode script didalam artikel / postingan blog merupakan salah satu cara agar membuat tampilan kode script didalam artikel terlihat rapi dan lebih enak dipandang. Terlebih lagi kotak script yang dipasang itu memiliki bentuk yang sangat unik dan memiliki warna yang sangat menarik sehingga para pembaca atau visitor blog akan nyaman ketika harus melihat kumpulan kode script entah itu HTML maupun javascript yang terkadang membuat mata kita menjadi sakit karena kerumitanya.

Menggunakan kotak script didalam postingan tentu akan lebih baik jika harus mempastekan langsung sebuah script kedalam postingan. Karena script tanpa kotak tentu akan terlihat tidak beraturan dan tidak rapi dan terkadang akan membuat susunan tulisan dan paragraf postingan yang dibuat kacau. Oleh sebab itu banyak yang menyarankan untuk selalu menggunakan kotak script untuk membungkus kode script didalam postingan, terutama bagi sobat yang memiliki niche Blog tentang kegiatan ngeblog atau blogging.

Untuk membuat kode script sebenarnya sangatlah gampang dan sederhana. Sebenarnya sudah banyak sekali blog-blog yang membahas mengenai cara membuat kotak script didalam artikel atau postingan, akan tetapi kebanyakan memberikan cara yang mengharuskan kita untuk pandai-pandai mengutak atik kode CSS didalam tema blog dan tidak semua blogger bisa melakukanya terutama bagi sobat blogger yang masih terbilang baru dan masih belajar.

Sobat jangan khawatir karena saya akan memberikan beberapa tampilan kotak script yang cukup unik dan sederhana tanpa harus mengutak atik CSS pada Tema blog beserta bagaimana cara memasangnya kedalam postingan blog.

Macam-Macam Tampilan Kotak Script

Gaya Minimalis Simpel

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Pastekan kode script disini</div>

Gaya Border di Kiri

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Pastekan Kode script disini</div>

Gaya Ungu Dotted

<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">Pastekan kode script disini</div>

Gaya Blue Double

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Pastekan kode script disini</div>

Gaya Kuning Telur

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">Pastekan kode script disini</div>

Biru Tanpa border

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;">Pastekan kode script disini</div>

Gaya Biru garis Putus-putus

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">Pastekan kode script disini</div>

Gaya Putih Garis Biru

<div class="script" style="background-color: white; border: 3px #1780dd Double; padding: 10px; text-align: left;">Pastekan kode script disini</div>

Gaya Scroll

<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">Pasang kode script disini</div>

Putih garis hitam

<div style="border: 1px solid black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">Pastekan kode script disini</div>