Cara Membuat Kotak Script Keren Di Postingan Blog

Cara Membuat Kotak Script Keren Di Postingan Blog - Jika kita akan membuat suatu blog tutorial pemograman, secara otomatis kita harus membuat postingan untuk menampilkan script untuk C++, Java , CSS , Python maupun script lainnya. Agar blog kita terkesan rapi dan lebih hidup,kita membutuhkan sebuah kotak script atau text box.Selain itu pembaca juga dapat membedakan mana yang artikel maupun script. Tidak hanya itu,kotak script juga dapat digunakan untuk catatan penting maupun kutipan (blockquote) didalam postingan.

Apa itu Kotak Script atau Text Box?

Kotak Script atau Text Box adalah sebuah kotak yang didalamnya dapat diisi dengan script maupun catatan penting dibuat dengan tag HTML dan sedikit desain menggunakan CSS sehingga kotak script yang dibuat terlihat berwarna dan menarik yang dapat menarik pengunjung blog nyaman ketika melihat sebuah script yang biasanya berisi kode HTML maupun Java yang dapat membuat mata kita sedikit pegal. Oleh karena itu penggunaaan kotak script di blog untuk membungkus script kode sangat diperlukan apalagi anda adalah sebuah blogger dengan niche blog ataupun pemograman.

contoh:

Kuy taruh disini Scriptnya ! 

Pada awalnya saya kebingungan bagaimana cara memasang kotak script di blog. Namun setelah searching di google,ternyata cukup mudah memasangnya. Anda tidak perlu paham html untuk membuatnya karena saya sudah menyiapkan berbagai macam tampilan kotak script yang cukup unik dan sederhana dengan berbagai macam desain. Namun jika anda paham CSS, maka itu akan menjadi nilai tersendiri karena anda dapat mengubah beberapa kode untuk membuat desain yang berbeda.

Nah berikut adalah berbagai macam tampilan kotak script yang sudah saya siapkan:

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kuy taruh disini Scriptnya ! </div>

• Kotak Solid Lightblue

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid lightblue; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">Kuy taruh disini Scriptnya ! </span>

• Kotak Solid Warna Green

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green;  padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;">Kuy taruh disini Scriptnya !  </span></div>

•  Kotak script dengan radius sudut=10px+border-left=10px

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 10px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">Kuy taruh disini Scriptnya !</div>

• Kotak Script dotted

<div style="border: 3px #9191ed Dotted; padding: 10px; background-color:#eaeaea; text-align: left;"><code>
Kuy taruh disini Scriptnya !
</code></div>

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Kuy taruh disini Scriptnya !</div>

<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Kuy taruh disini Scriptnya !</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kuy taruh disini Scriptnya !</div>

• Kotak Script dashed

<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Kuy taruh disini Scriptnya !</div>

<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;">Kuy taruh disini Scriptnya !</div>

• Kotak Script Single-border

<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Kuy taruh disini Scriptnya ! </div>

• Kotak Script Double-border

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kuy taruh disini Scriptnya !</div>

<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Kuy taruh disini Scriptnya !</div>

• Kotak Script Scroll vertikal

<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;">
Kuy taruh disini Scriptnya !
"A
B
C"
</div>

• Kotak Script Scroll Horizontal

<div style="background-color: antiquewhite; border: 2px solid brown ; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
Kuy taruh disini Scriptnya !</div>

• Kotak Script Scroll Vertikal-Horizontal

<div style="border: 2px solid black; height: 100px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 2500%;">
Kuy taruh disini Scriptnya !

A

B

C

D

E

</div>
</div>

Catatan:

• Border : 6px = Ketebalan Border Kotak Script
• Text-align:left = Posisi text rata kiri
• Background-color: #00000 = Background warna
• Width: 2500% = Lebar kotak

Lalu, Bagaimana Cara Memasangnya?

cara memasangnya cukup mudah. anda tinggal mengikuti tutorial yang sudah saya buatkan dibawah ini:

Cara Memasang Kotak Script Di Blog 

1. Masuk ke dashboard lalu buat postingan
   
2. Beralih dari mode compose ke mode HTML
   
   
   
3. Masukkan Kode Scriptnya di mode HTML
   
   
   
4. Kemudian balik ke mode compose, maka kode kotak script akan berubah seperti ini. Kemudian kalian bisa menambahkan script html, css maupun java di dalam kotak tersebut
   
   
   

Catatan ! jika kamu ingin meletakkan kode html sebaiknya diparse terlebih dahulu menggunakan tools parse html disini

Kenapa Harus Pakai di Postingan? 

1. Supaya lebih rapi karena bisa membedakan antara text biasa dengan Script.
2. Tidak memperlambat Loading Blog
3. Desain Lebih menarik ketika kita hanya menggunakan tools bawaan blogger