Cara Membuat Slideshow di Postingan Blogger

Panduan Cara membuat Slideshow atau gambar Slider responsive di postingan untuk mempercantik tampilan Blog Anda.

JejakTerkini - Slideshow telah banyak digunakan oleh semua pemilik Blog untuk memperindah laman pos mereka.

Ini adalah cara yang bagus untuk menempatkan banyak gambar ke satu pos tanpa harus membuat pembaca menggeser ke bawah halaman.

Selain itu, ia juga bisa membantu Anda untuk memuat waktu interval agar lebih cepat, karena hanya memunculkan satu gambar dalam satu waktu. Ditambah, terlihat lebih rapi dan elegan.

Sementara, ada banyak cara membuat Slideshow di Blog itu sendiri, berkonsep sederhana tanpa menambahan kode khusus atau dengan menggunakan Javascript.

Baca Juga: Cara Membuat Table of Content (Daftar Isi) di Blogger

Apa itu Slideshow?

Intinya, ini adalah galeri foto yang ditempatkan sejajar atau dibuat dalam bingkai secara bersamaan dalam presentasi.

Artinya, sejumlah gambar dapat dihubungkan bersama-sama untuk diakses secara otomatis, manual, atau melalui pengulangan.

Demikian, ia dapat merespon interaksi pengguna seperti klik atau gesek untuk melihat konten berikutnya atau sebelumnya.

Selain gambar, ini juga memungkinkan untuk mengkolaborasikan video atau audio sebagai deretan kostumisasi.

Kelebihan dan Kekurangan Menggunakan Slideshow

Dalam terminologi desain web, Sliders atau Carousel adalah istilah yang dipakai untuk menggeser deretan gambar disatu frame dan dapat ditempatkan dimana pun sesuai keinginan.

Konsep seperti ini bisa dipakai oleh semua jenis website, namun yang paling umum digunakan oleh mereka yang menjalankan situs bisnis atau portofolio.

Namun yang jelas, ada sejumlah hal positif dan negatif jika kita menerapkan mode tersebut, antara lain:

Kelebihan

● Carousel dapat membantu pengguna untuk melihat highlights atau menavigasi individual gambar lebih cepat dan mudah.

● Visual terlihat lebih rapi dan menarik, karena hanya ditempatkan pada satu sisi ruang.

● Isi postingan nampak lebih segar dan elegan. Juga, memiliki potensi lebih besar untuk mengambil perhatian pengunjung.

● Manajemen konten yang disederhanakan, penempatan (Foto, Video,Audio, dan Link) bisa dimasukkan dalam satu wadah, artinya tidak terpisah-pisah.

Kekurangan

● Kebanyakan sliders memakan waktu pemutan halaman terutama di mobile, terlebih jika berisi banyak konten.

● Penelitian menunjukkan, Blog yang memiliki tingkat load pos lebih lama akan ditinggalkan oleh pengunjung, ini berdampak ke Bounce Rate menjadi tinggi.

Demo Slideshow

Gambar desain responsif dan struktur widget yang tertata apik dibuat dengan aspek dan atribut melalui menambahan CSS dan Javascript, ini akan memberi Anda layaknya nuasa premium.

Berikut adalah contoh carousel demo yang bisa Sobat lihat pada halaman dibawah ini.

Demo Slideshow

Bagaimana, tertarik? Jika ya, silahkan scroll kebawah untuk melihat lebih lanjut tutorial pembuatannya Guys!

Catatan: Mode gambar Sliders ini hanya khusus untuk postingan, bukan homepage Blog.

Tips Membuat Slideshow Responsive di Blogger

Di WordPress, biasanya pengguna hanya perlu menginstall plugin dengan mudah untuk mendapatkan widget apapun yang mereka inginkan.

Berbeda dengan Blogger, bahwa kita harus membuatnya secara manual melalui penempatan beberapa kode di bagian template HTML.

Masalahnya sekarang apakah Sobat sudah siap dengan kemungkinan blog akan sedikit melambat, karena menyertakan sejumlah lapisan gambar ke postingan.

Ya, ketika seseorang datang ke Blog Anda, maka pengalaman pengguna adalah prioritas utama. Sedangkan secara teknis, Slideshow meninggalkan dampak pada kecepatan beban halaman.

Nah, disinilah Sobat perlu mensiasati dengan cara mengompress gambar terlebih dahulu sebelum diupload ke postingan.

Juga, usahakan jangan memasukkan foto atau konten lainnya terlalu banyak agar kecepatan respon laman menjadi optimal.

Oh iya Sob, cara membuat gambar slide di postingan ini tidak otomatis lho? artinya harus digeser secara manual melalui tombol klik kiri atau kanan.

So, langsung aja kamu perhatikan step by step cara menaruh kode script yang kami instruksikan berikut ini.

Langkah 1

Pertama-tama, letakkan CSS ini tepat diatas kode ]]></b:skin> pada template HTML Anda (Gunakan CTRL+F supaya mempermudah pencarian).


.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}
.carousel-cell img{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
}
.caraousel-cell iframe{
    width: 100%;
    height: 200px;
    padding: 0px;
    margin: 0px;
}
.carousel-cell.is-selected iframe {
    width: 100%;
    height: 200px;
}
.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 200px!Important;
}
.flickity-page-dots {
  bottom: -22px;
}
.flickity-page-dots .dot {
  height: 4px;
  width: 40px;
  margin: 0;
  border-radius: 0;
}
.flickity-button {
  background: #333;
  color: white;
}
.flickity-button:hover {
  background: #F90;
}
.flickity-prev-next-button {
  width: 30px;
  height: 30px;
  border-radius: 5px;
}
@media screen and(max-width:640px){
.flickity-viewport {
  overflow: hidden;
  position: relative;
  max-height: 200px!Important;
}
.carousel-cell{
  height: 200px!Important;
}
iframe.slider{
 width:100%;
 height:100%;
}
.carousel-cell img {
    height: 200px;
}}

Keterangan: Silahkan ubah nilai Height dan Width menyesuaikan ukuran lebar dan tinggi gambar Anda atau biarkan secara default.

Langkah 2

Setelah itu, tambahkan script berikut dibagian atas kode </head> > Kemudian save template Anda.


<link href='https://unpkg.com/flickity@2/dist/flickity.min.css' rel='stylesheet'/>
<script src='https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js'/>

Langkah 3

Terakhir, silahkan masukkan kode ini di setiap postingan yang ingin kamu buatkan carousel-nya > Done.


<div class="carousel" data-flickity>
  <div class="carousel-cell"><img alt="slideshow1" src="https://1.bp.blogspot.com/-eKFQbvPoEBE/X9DEgurcjDI/AAAAAAAACS8/Lpn8VsYUfz47Y0FG2DoWZ5NHSl_AiXTxwCLcBGAsYHQ/s0/gambar-demo1.jpg" title="slideshow1"/></div>
  <div class="carousel-cell"><img alt="slideshow2" src="https://1.bp.blogspot.com/-mHcv5NXJyiA/X9DEjyI-z2I/AAAAAAAACTA/0Mv2L6gb6tgS_Eu8Kx9Cu6rex1dqbOjHgCLcBGAsYHQ/s0/gambar-demo2.jpg" title="slideshow"/></div>
  <div class="carousel-cell"><iframe class="slider" src="https://www.youtube.com/embed/BHiMYGRBhhs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></div>

Keterangan: Ubah alamat URL dan video dengan milik Sobat.