Cara Membuat Kotak Script Shadow dengan Scroll di Postingan Blog
Kotak Script atau text box area merupakan elemen yang digunakan untuk membungkus tulisan yang ada di dalamnya. Biasanya kotak script ini digunakan untuk membungkus tulisan yang berupa script atau kode (coding).
Kotak script atau box script dua tipe, yaitu kotak script biasa (tanpa scroll) dan kotak script dengan scroll {baik itu scroll horizontal (ke samping), scroll vertikal (ke atas-bawah), dan scroll horizontal-vertikal (ke samping dan atas-bawah)}.
Berbeda dengan kebanyakan kotak script lainnya, kotak script yang akan diulas disini adalah kotak script yang memiliki keunikan tersendiri, yaitu kotak script yang ada efek shadow (bayangan) di garis tepi sebagai pembatasnya
Bukan hanya itu saja, di artikel ini juga menyediakan kotak script yang ada efek bayangannya tanpa scroll dan dengan scroll serta bisa memilih menggunakan kotak script yang ada backgroundnya (ada warna di latar belakangnya) atau tanpa warna background (background transparan).
Kotak Script dengan Efek Shadow (Bayangan)
- Kotak Script Shadow Tanpa Scroll
<div style="background-color: #f6f6f6; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 2px; height: auto; padding: 5px; t-align: left; width: auto;"><p><span style="font-family: inherit;"></span></p><div><span style="font-family: inherit;">Tulisan disini</span></div><p></p></div>
- Kotak Script Shadow dengan Scroll Horizontal (ke samping kanan-kiri))
<div style="background-color: #e6f7ff; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 2px; height: auto; overflow-x: scroll; padding: 5px; width: auto;"> <p style="text-align: left; width: 120%;">Tulisan disini</p> </div>
- Kotak Script Shadow dengan Scroll Vertikal (ke atas-bawah)
<div style="background-color: #e1ffea; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 2px; height: 100px; overflow-x: auto; padding: 5px; width: auto;"> <p style="text-align: left;">Tulisan disini</p> </div>
- Kotak Script Shadow dengan Scroll Horizontal dan Vertikal (ke kanan-kiri dan atas-bawah)
<div style="background-color: #fff2c2; border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 2px; height: 100px; overflow-x: scroll; padding: 5px; width: auto;"> <p style="text-align: left; width: 110%;">Tulisan disini</p> </div>
Cara Menghilangkan Warna Pada Background Kotak Script Shadow
Cara membuat warna latar belakang (background) pada kotak script jadi transparan (tidak berwarna), yaitu dengan menghilangkan atau menghapus kode background-color. Contohnya hapus kode seperti berikut.
background-color: #f6f6f6;
Keterangan Kode
- border-radius: 2px; = tepi garis bagian sudut (pojok) tumpulnya 2px.
- height: 100px; = kotak script tingginya 100px.
- width: 120%; = lebar kotak script yang bisa di-scroll kesamping adalah 20%.
- width: auto; = lebar kotak script otomatis (menyesuaikan ruang halaman dalam mode mobile maupun desktop).
- overflow-x: scroll; = kode agar kotak script dapat di-scroll.
- box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 2px; = kode efek bayangan di tepi garis atau batas.
- padding: 5px; = jarak tulisan dengan batas kotak script adalah 5px.
- #f6f6f6 = salah satu kode warna dalam bentuk HEX.
- background-color: #fff2c2; = kode untuk memberikan warna pada background dengan warna #fff2c2.
Cara Memasang Kotak Script di dalam Postingan Blogger
1. Buka dashboard blogger.
2. Masuk ke menu postingan.
3. Edit salah satu postingan blog.
4. Ubah menjadi Tampilan HTML.
5. Paste atau pasang kode script di tempat yang diinginkan (di akhir kalimat), yaitu sesudah kode </div> atau sebelum kode <div>.
6. Simpan perubahan.
Penutup
Demikian tutorial terkait cara membuat kotak script dengan efek shadow (bayangan) tanpa scroll dan dengan scroll horizontal dan vertikal di dalam postingan blog (blogger). Semoga bermanfaat!!!
Ditulis oleh: Syahrul Hanafi