JOEE txt

Beranda
Blog

Cara Membuat Script Box Keren di Postingan Blog

Box Script memiliki kegunaan agar tampilan blog terlihat rapi dan mudah dipahami.

 



Apa itu Script Box?

Mungkin sudah terbayang dipikiran Anda tentang pengertian dan definisi dari elemen tersebut. Script box atau kotak skrip adalah elemen kotak yang bertugas untuk membungkus tulisan yang ada di dalamnya (biasanya berupa skrip atau kode). Pada dasarnya, elemen pembungkus tersebut sangat mirip dengan syntax highlighter. Yang membedakan dua komponen tersebut hanya dari segi pemasangan, selebihnya bisa dikatakan mirip.

Box Script memiliki kegunaan agar tampilan blog terlihat rapi dan mudah dipahami. Tampilan box script juga bermacam macam ada yang hanya berbentuk kotak ada juga yang ditambah dengan scroll, bisa juga diganti backgroundnya dan ditambahkan dengan border.

Membuat Box Script

Membuat box script bisa dikatakan sangat mudah. Dengan banyaknya jenis tampilan yang bisa digunakan, Anda akan bebas memilih tampilan yang sesuai dengan keinginan Anda.

Disini saya hanya memberikan 3 contoh tampilan box script yang dapat Anda gunakan.


<div style="background-color: #2c323c; color: #fff; border-left: 5px solid #800000; padding: 17px; text-align: left;">
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;">
Script di sini...
</div>

Mungkin Anda tertarik membaca postingan ini:

<div style="background-color: #2c323c; border-radius: 0 10px 0 10px; padding: 17px; text-align: left;">
Script di sini...
</div>


Kalian bisa modifikasi box script sesuai kreasi kalian dengan cara :

  • Mengganti ukuran sudut lengkungan contohnya: border-radius: 10px ada 3 ganti semua
  • Mengganti warna background contohnya : background-color: #00B8FF ( Kode Warna )
  • Merubah ketebalan border / garis tepi kolom contohnya : border: 4px
Bagi yang ingin menambahkan scroll pada box script bisa menggunakan code dibawah ini :

<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">


Isi Scroll Box

</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; height: 100px; overflow: auto; padding: 10px; padding: 10px; width: 600px;">


Isi Scroll Box



</div>

Catatan

  1. Untuk memberikan fitur scroll, gunakan atribut overflow: auto; height: 150px; width: 100%
  2. background-color = Warna latar belakang
  3. background-image = Warna latar belakang untuk menambahkan gradiasi
  4. color = Warna konten
  5. border = Garis pinggir
  6. border-radius = Ketumpulan garis pinggir
  7. padding = Jarak konten dengan garis pinggir
  8. text-align = Arah awal konten
  9. Silahkan atur kumpulan kode di atas dengan tampilan yang Anda inginkan.

Walaupun tidak seefektif syntax highlighter, namun tidak ada salahnya untuk mencoba script box tersebut. Selain karena banyaknya jenis tampilan yang bisa digunakan, fitur ini juga memiliki ukuran yang kecil sehingga dapat dimuat dengan cepat pada saat pemuatan halaman.

Atau Anda juga bisa menggunakan Aplikasi Source Code Formatting yang kompatibel dengan bahasa JavaScript, HTML, CSS, C#, PHP, ASP.net, VB.Net, Visual Basic, DOT.net, ASP & banyak bahasa lainnya.

Silahkan berkreasi dan selamat mencoba, semoga bermanfaat.

No one is too busy, it's just a matter of priority.