Cara Membuat Script Box Responsive Untuk Tutorial Blog

Pernah melihat Script Box pada beberapa tutorial yg telah dibuat oleh para blogger? Biasanya blog yang memiliki rating tinggi akan membuat postingan dengan isi maupun tampilan yang semenarik mungkin. Salah satunya adalah Script Box yang mereka gunakan pada beberapa tutorial yang telah mereka buat. Script Box ini akan mengemas Script yang akan mereka share kepada para pembaca, menjadi lebih elegan dan terkesan rapih. Sebenarnya Script Box sendiri adalah hanya sebuah Text Box biasa pada umumnya. Namun Text Box ini sangat sering digunakan untuk menyimpan sebuah material Script di dalamnya sebagai tutorial, yang nantinya dapat digunakan oleh para pengunjung blog.

Terdapat beberapa jenis Box yang bisa kita gunakan. Namun Akira telah memilih salah satu Box, yang menurut Akira cukup elegan. Box yang satu ini memiliki fitur Scroll. Jadi, Box ini tidak akan memanjang ke bawah jika Script yang kamu masukan cukup banyak.



Cara membuatnya cukup mudah. Ikuti tahap-tahap berikut:

1. Buat postingan baru, atau buka postingan yang sudah kamu buat.

2. Ubah dari mode Compose menjadi mode HTML.

3. Masukan Script ini untuk membuat Box.



<div style="background-color: #1c1c1c; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;"></div>



4. Setelah selesai, ubah kembali dari mode HTML menjadi mode Compose.

5. Box akan muncul, dan kamu sudah bisa memasukan Script atau teks apapun ke dalam box tersebut.


Hasilnya akan seperti ini... (di dalamnya adalah beberapa Script Box lain yang bisa kamu gunakan)

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Disini
</div>



 <div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #ffffcc; border-top: 20px solid #ffff00; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Di sini
</div>



 <div style="background-color: #ccffff; border: 3px #ccff00 double; padding: 10px; text-align: left;">
Kode Script Sobat Disini</div>



 <div style="background-color: #ff99ff; border: 3px #ff33cc double; padding: 10px; text-align: left;">
Kode Script Sobat Disini</div>


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Kode Script Sobat Disini</div>


 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Kode Script Sobat Disini</div>

<div style="background-color: #cccccc; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;">
kode script Sobat di sini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

Beberapa element dapat kamu edit untuk merubah tampilan Box. Seperti warna, tinggi, dan lain sebagainya. Kamu bisa bereksperimen sendiri :D

author: Akira Asayami