Cara Membuat Gambar Grid dan Slideshow di Blogspot

Daftar Isi

Cara membuat gambar grid dan slideshow di blogspot mudah dengan menggunakan css. Fungsi membuat gambar dengan tampilan ini akan memperindah tampilan postinganmu. Selain itu dengan menggunakan tampilan grid dan slider ini dapat mengurangi panjangnya space pada laman artikel.

Membuat gambar berupa grid atau slideshow carousel dalam suatu postingan dapat memiliki beberapa kegunaan yang berbeda, tergantung pada konteks dan tujuan penggunaan.

Kelebihan Menggunakan Gambar Grid dan Slideshow

Gambar grid ataupun slider memang dapat digunakan untuk menampilkan serangkaian gambar-gambar dalam satu postingan, sehingga tanpa memakan ruang postingan. Contohnya, kamu memiliki beberapa foto kenangan, gambar dengan tampilan ini akan membantumu menggabungkan foto-foto tersebut dalam satu tampilan yang menarik. Ini membantu meningkatkan visualisasi dan memperlihatkan kumpulan gambar secara bersamaan.

Postingan mengenai pembuatan gambar grid dan slider kali ini tanpa menggunakan javascript, jadi ya cuma menggunakan css.

Kekurangan penggunaan ini mungkin jadi ukuran gambar kurang terlalu besar, tapi tenang tampilan gambar sudah responsive untuk di hp.

Nah sangat bermanfaat bukan? Saya akan share cara membuat tampilan gambar menjadi grid di postingan blogspot.

---

Gambar dengan Slideshow

Gambar dengan slideshow ini kamu cantumkan lebih dari 2 atau 3 gambar. Menggunakannya cukup kamu geser-geser maka akan beralih ke gambar berikutnya.

Sangat cocok untuk blog-blog dengan niche otomotif yang menampilkan produk-produk yang ingin di ulas. Gambar dibuat slide agar terlihat simple dan tentu saja enak dilihat. Berikut contoh demonya..

Cukup menarik bukan? Cara menggunakannya, silahkan tempel css berikut ini diatas </style>

.sliderimg .sliderContainer{display:flex;width:100%;white-space:nowrap;flex-direction:row;overflow:auto;scroll-behavior:smooth}

.sliderimg .sliderContent img{margin-right:20px;border-radius:3px;max-width:720px;max-height:250px;scroll-snap-align:start;box-shadow:0 0 10px 0 rgba(0,0,0,.2)}

@media screen and (max-width:500px){.sliderimg .sliderContent img{width:300px}}

::-webkit-scrollbar{height:8px}

::-webkit-scrollbar-thumb,::-webkit-scrollbar-thumb:hover{background:#ccc;border-radius:50px}

/* Dark Mode */

.drK ::-webkit-scrollbar-thumb,.drK ::-webkit-scrollbar-thumb:hover{background:#666}

Selanjutnya silahkan kamu buat postingan dengan beberapa gambar di blogger dengan kode berikut.

<div class="sliderimg">
  <div class="sliderContainer">
    <!-- Gambar 1 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Gambar 2 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Gambar 3 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Gambar 4 -->
    <div class="sliderContent">
      <a href="#" target="_blank"><img alt="#" src="URL Gambar" title="#"/></a>
    </div>
    <!-- Tambahan slider -->
  </div>
</div>

URL Gambar = silahkan isi dengan address pada gambarmu.
# pada alt dan title = silahkan isi sesuai dengan gambarmu.

Setelah selesai, coba lihat hasilnya.

Membuat Gambar dengan Tampilan Grid

Membuat gambar dengan tampilan gambar grid 2 kolom, saya membuat 2 kolom karena lebih enak dipandang sobat. Kalau 3 kolom, mungkin akan lebih kecil ukuran tiap gambarnya menurut saya. Berikut contoh visualisasi demonya.

Cara menggunakannya, silahkan tempel css berikut ini diatas </style>

.grid-img {
  -webkit-column-width: 300px;
  -moz-column-width: 300px;
  column-width: 300px;
  -webkit-column-gap: 8px;
  -moz-column-gap: 8px;
  column-gap: 8px;
}
.img {
  display: inline-block;
  width: 100%;
  height: auto;
  margin: 0 0 5px 0;
}

@media screen and (max-width: 500px) {
  .grid-img {
    display: flex;
    width: 100%;
    position: absolute;
    display: inline-block;
    padding: 2px;
    -webkit-column-width: 150px;
    -moz-column-width: 150px;
    column-width: 150px;
    -webkit-column-gap: 1px;
    -moz-column-gap: 1px;
    column-gap: 8px;
  }
}

<div class="grid-img">
<img src="url gambar 1"alt="#" title="#" />
<img src="url gambar 2"alt="#" title="#" />
<img src="url gambar 3"alt="#" title="#" />
<img src="url gambar 4"alt="#" title="#" />
<img src="url gambar 5"alt="#" title="#" />
<img src="url gambar 6"alt="#" title="#" />
</div>

URL Gambar = silahkan isi dengan address pada gambarmu
# pada alt dan title = silahkan isi sesuai dengan gambarmu

Selesai, dan publish postingan blogspotmu

Gambar dengan tampilan seperti diatas juga dapat digunakan untuk menceritakan pengalaman secara visual. Seperti contoh jika kamu berlibur dan ingin membuat postingan mengenai liburanmu, maka dengan menampilkan gambar grid atau slider image akan lebih enak dipandang. Daripada menampilkan gambar-gambar yang terlalu besar dan kurang responsive yang akan membuat speed loading blogmu lemot.

Tapi jangan lupa, setiap mengunggah gambar di postingan blog, compress terlebih dahulu agar tidak memberatkan pagespeed laman tersebut.

Ya itulah postingan mengenai pembuatan gambar grid dan slideshow di blogspot ya sobat. Terima kasih telah berkunjung.