Cara Membuat Galeri Foto dengan CSS

Tutorial By Dwitari

Posted on October 3rd, 2018

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.

<!DOCTYPE html>
<html>
<head>
<title> Tutorial Membuat Galeri Dengan CSS </title>
<style>
.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

.gallery:hover {
    border: 1px solid #777;
}

.gallery img {
    width: 100%;
    height: auto;
}

.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>
  <h2 align="center"> Tutorial Membuat Galeri Dengan CSS </h2>
<div class="gallery">
  <a target="_blank" href="hiking.jpg">
    <img src="hiking.jpg" alt="hiking" width="600" height="400">
  </a>
  <div class="desc">The girl hiking advanture...</div>
</div>
<div class="gallery">
  <a target="_blank" href="hiking2.jpg">
    <img src="hiking2.jpg" alt="hiking2" width="600" height="400">
  </a>
  <div class="desc">The boy hiking advanture...</div>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title> Tutorial Membuat Galeri Dengan CSS </title>

<style>

.gallery {

margin: 5px;

border: 1px solid #ccc;

float: left;

width: 180px;

}

.gallery:hover {

border: 1px solid #777;

}

.gallery img {

width: 100%;

height: auto;

}

.desc {

padding: 15px;

text-align: center;

}

</style>

</head>

<body>

<h2 align="center"> Tutorial Membuat Galeri Dengan CSS </h2>

</a>

<div class="desc">The girl hiking advanture...</div>

</div>

</a>

<div class="desc">The boy hiking advanture...</div>

</div>

</body>

</html>

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.

<div class="gallery">
  <a target="_blank" href="[link file foto]">
    <img src="[nama file foto]" alt="[nama judul foto]" width="600" height="400">
  </a>
  <div class="desc">Isikan deskripsi tentang foto ini...</div>
</div>

</a>

<div class="desc">Isikan deskripsi tentang foto ini...</div>

</div>

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.