Tutorial Pemrograman

Cara Membuat Galeri Foto 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.

Di dalam halaman website, kamu pasti membutuhkan galeri gambar atau foto tentang diri kamu, toko online kamu, pengalaman kamu, atau promosi produk buatan kamu agar si pengunjung (visitor) dapat mempercayai bahwa website kamu ini sangat berguna bagi mereka.

Misalkan, website kamu ini tentang toko online sepatu, maka kamu harus membuat halaman galeri gambar atau foto yang berisi produk, harga, merk, dan ukuran sepatu, beserta deskripsi tentang produk sepatu yang kamu jual atau tawarkan kepada pengguna sebagai konsumen.

Penulis akan berikan tutorial cara membuat galeri foto dengan CSS. Sebelum memulai, siapkan 2 gambar bitmap tipenya (jpg, png, bmp, jpeg). Usahakan perbedaan ukuran panjang dan lebar tidak terlalu jauh, agar mudah dimodifikasi dengan CSS.

Berikut cara membuat galeri foto 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 “gallery-css.html”.

5. Klik Save.

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

Lihat hasilnya.

Selesai.

Apabila di dalam project website kamu belum ada gambar, silahkan siapkan 2 gambar dulu, kemudian ditaruhkan ke dalam project website kamu.

Catatan: Kamu juga bisa membuat lebih banyak galeri gambar atau foto ke dalam website. Kamu tinggal menambahkan kode script di bawah ini.

Misalkan, kamu membuat 4 galeri gambar ke dalam website tersebut, maka kamu harus menambahkan kode script tersebut sebanyak 4 kali. Kode script CSS untuk galeri yang di atas bisa diterapkan di CSS Internal atau CSS eksternal.

Nah, kamu bisa membuat halaman galeri gambar ke dalam website kamu sendiri sesuai dengan tema website kamu agar si pengunjung tidak bingung dengan isi galeri gambar atau foto yang ada di dalam website kamu.

Demikian tutorial cara membuat galeri foto dengan CSS. Selamat mencoba.









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