Tutorial Sederhana Syntax HTML dan CSS Galeri Foto + Deskripsi di Postingan Blog

Dibawah ini kode /syntax html dan css Galeri Foto yang bisa digunakan oleh sobat didalam postingan blog sobat.

Artikel Kali ini Banua Ilmu akan membagikan tutorial sederhana untuk para newbie blogger yang menggunakan niche photography... Biasanya pemilik blog Photography pastinya memposting gambar-gambar atau foto-foto hasil karya mereka.

Dibawah ini kode /syntax html dan css Galeri Foto yang bisa digunakan oleh sobat didalam postingan blog sobat. oke langsung ke TKP.... 😍😊

Langkah-langkah:

• Buat postingan baru, pilih HTML ( jangan Compose).
• Copy Kode dibawah ini

div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
  background-color: #f1f1;
  color: #000;
}
div.gallery:hover {
  border: 1px solid #777;
}
div.gallery img {
  width: 100%;
  height: auto;
}
div.desc {
  padding: 15px;
  text-align: center;
}
</style>
<div class="gallery">
  <a target="_blank" href="url-foto">
    <img src="url-foto" alt="deskripsi alternatif foto" width="600" height="400">
  </a>
  <div class="desc">isi deskripsi foto disini</div>
</div>

• Masukkan URL Foto yang sudah sobat Upload ke Blog, dan isi deskripsi foto tersebut. Untuk ukuran foto bisa sobat sesuaikan.
• Untuk menambahkan foto lagi, tinggal sobat copy paste dari kode:
• <div class="gallery">....</div>
• Untuk mengganti warna background dan text, cari kode "background-color" / "color" (tanpa tanda kutip) dan ganti kode warnanya. Kode warna dapat sobat lihat di Link Kumpulan Kode Warna.
• Publikasikan dan lihat hasilnya...

Lihat Demo

Selamat mencoba...