Cara Menciptakan Script Box Responsive Untuk Tutorial Blog

Minggu, 17 Mei 2015

Pernah melihat Script Box pada beberapa tutorial yg telah dibentuk oleh para blogger? Biasanya blog yang mempunyai rating tinggi akan menciptakan postingan dengan isi maupun tampilan yang semenarik mungkin. Salah satunya yakni 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 yakni hanya sebuah Text Box biasa pada umumnya. Namun Text Box ini sangat sering dipakai untuk menyimpan sebuah material Script di dalamnya sebagai tutorial, yang nantinya sanggup dipakai oleh para pengunjung blog.

Terdapat beberapa jenis Box yang sanggup kita gunakan. Namun Akira telah menentukan salah satu Box, yang berdasarkan Akira cukup elegan. Box yang satu ini mempunyai fitur Scroll. Jadi, Box ini tidak akan memanjang ke bawah bila Script yang kau masukan cukup banyak.



Cara membuatnya cukup mudah. Ikuti tahap-tahap berikut:

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

2. Ubah dari mode Compose menjadi mode HTML.

3. Masukan Script ini untuk menciptakan 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 kau sudah sanggup memasukan Script atau teks apapun ke dalam box tersebut.


Hasilnya akan ibarat ini... (di dalamnya yakni beberapa Script Box lain yang sanggup kau 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 sanggup kau edit untuk merubah tampilan Box. Seperti warna, tinggi, dan lain sebagainya. Kamu sanggup bereksperimen sendiri :D

author: Akira Asayami
 

Share This :