Tutorial Pemrograman

Cara Menambahkan Scroll Bar pada Konten dengan CSS

CSS singkatan dari Cascading Style Sheets. CSS adalah salah satu bahasa markup yang berfungsi khusus untuk merancang tampilan pada website agar hasil tampilan website lebih maksimal dan sesuai kebutuhan klien atau perusahaan.

Ketika kamu membuat sebuah informasi yang bersifat deskriptif atau naratif yang ada di dalam website, pasti akan mengetik dengan banyak kata, misalkan cerita naratif yang isi kontennya mencapai 500 kata atau lebih. Dan bagian atas isi konten yang tadi ada data informasi pengguna yang menciptakan cerita itu.

Kamu akan berpikir bagaimana cara data informasi pengguna pembuat cerita tersebut tetap tampil di halaman website itu tanpa harus ikuti dalam menggeser lanjutan cerita dengan scroll bar. Jadi, cukup bagian cerita saja yang memakai scroll bar, karena kemungkinan jumlah kata yang sangat banyak sehingga tidak cukup satu halaman website yang ditampung.

Berikut cara menambahkan scroll bar pada konten dengan CSS.

Langkah:

1. Silahkan buka teks editor seperti Notepad++, Sublime, Visual Code, dan sebagainya.

2. Silahkan ketik kode script di bawah ini.

3. Simpan hasil kode script tadi dengan tekan CTRL + S.

4. Pilihlah tempat simpan sesuai keinginan kamu, berikan nama “scroll-konten-css.html”.

5. Klik Save.

6. Cari file yang tadi, kemudian klik kanan pada mouse → Open With → Web Browser app (Chrome, Mozilla, atau Microsoft Edge).

Berikut hasilnya.

Selesai.

Catatan:

Kamu bisa terapkan kode script CSS yang di atas ke dalam CSS internal, CSS eksternal, ataupun CSS inline. Kamu bisa mengatur ukuran konten sesuka kamu.

Kini, kamu bisa membuat isi konten yang tadi sebanyak-banyaknya dengan bantuan scroll bar agar memudahkan pengguna menggeser untuk membaca lebih lanjut, tanpa harus memindahkan bagian yang lain.

Demikian tutorial cara menambahkan scroll bar pada konten dengan CSS.









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Download Aplikasi Inwepo

Berlangganan tutorial Inwepo melalui email

Copyright © 2018 Inwepo - All Rights Reserved.

To Top