Cara Membuat Slideshow (Carousel) di Postingan Blog

cara membuat slideshow di postingan blog

Cara membuat Slideshow (Carousel) Gambar responsive di postingan Blog biar tambah keren dan elegan menggunakan CSS serta Javascript.

JejakTerkin.com - Seperti halnya dengan Table of Contents. Slideshow juga telah banyak dipakai oleh sebagian besar situs untuk memperindah halaman post mereka.

Sebuah teknis desain web yang bagus buat menempatkan banyak foto ke dalam artikel tanpa membuat pembaca harus menggeser atau menggulir ke bawah halaman.

Disamping itu, dapat membantu Anda memuat waktu interval agar jauh lebih cepat. Pasalnya ini hanya memunculkan satu gambar dalam satu waktu, bahkan terlihat rapi atau tidak berantakan.

Ada banyak cara membuat Slideshow itu sendiri, baik berkonsep sederhana tanpa menambahan kode khusus atau dengan memasukkan HTML.

Nah jika kalian ingin mencobanya maka ikuti terus tutorial berikut hingga akhir.

Apa itu Slideshow?

Intinya menurut Hubspot adalah sebuah galeri photo yang diposisikan sejajar atau dibuat bingkai dalam presentasi.

Artinya, beberapa gambar dihubungkan bersama-sama agar bisa diakses secara otomatis, manual, maupun melalui pengulangan.

Dengan begitu bahwa ia dapat merespon interaksi pengguna seperti klik/gesek untuk melihat konten berikutnya atau sebelumnya.

Selain bentuk foto, mode ini juga memungkinkan kita mengkolaborasikan video dan audio sebagai deretan kostumisasi.

Kelebihan dan Kekurangan Slideshow

Dalam terminologi desain web, Sliders (Carousel) merupakan istilah yang seringkali dipakai untuk menggeser deretan gambar disatu frame kemudian diletakkan di mana pun sesuai keinginan kita.

Metode Carousel ini dapat diterapkan ke semua jenis platform seperti Blogger hingga WordPress. Namun pada umumnya digunakan oleh mereka yang menjalankan situs bisnis atau portofolio.

Tetapi yang jelas, ada sisi positif dan negatifnya lho? Apa saja itu? Silahkan baca uraianya dibawah.

Pro

Carousel dapat membantu pengguna melihat highlights atau sebagai alat individual gambar agar lebih cepat dan mudah dinavigasi.
Visual terlihat sangat menarik, karena hanya ditempatkan pada satu sisi ruang.
Isi postingan nampak lebih elegan, sehingga memiliki potensi cukup besar untuk mengambil perhatian pengunjung.
Manajemen konten yang disederhanakan, penempatan Foto, Video, Audio, dan Link bisa dimasukkan dalam satu wadah supaya tidak terpisah-pisah.

Kontra

Sliders membutuhkan waktu pemutan yang agak lama terutama di versi mobile, apalagi jika berisi banyak konten.
Penelitian menunjukkan bahwa laman Blog yang berat cenderung akan ditinggalkan oleh visitor, jadi menaikkan Bounce Rate (Rasio pentalan).

Demo Slideshow

Sekali lagi, struktur widget carousel dibuat dengan menambahan CSS dan Javascript, sehingga memberi nuasa premium dalam artikel Anda.

So, berikut adalah contoh demonya yang bisa Sobat lihat pada laman dibawah ini.

Pratinjau

Lalu bagaimana, apakah kamu tertarik? Jika ya, silahkan simak proses tutorial pembuatannya.

Keterangan: Mode Sliders ini hanya dikhususkan untuk postingan, bukan homepage.

Cara Membuat Slideshow Postingan di Blog

Kalau platform WordPress, biasanya pengguna hanya perlu menginstall plugin untuk mendapatkan widget apapun yang mereka inginkan.

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

Oh iya, cara membuat gambar slide di postingan Blogger ini sifatnya tidak otomatis lho? Artinya harus digeser sendiri dengan mengklik tombol kiri atau kanan.

Tanpa berpanjang lebar, langsung aja perhatikan step-by-step bagaimana menaruh script yang kami instruksikan berikut.

Informasi: Double Click to Copy.

1. Tambahkan CSS

Pertama-tama, letakkan CSS ini tepat diatas kode ]]></b:skin> pada tema Blog Agan (Tekan tombol 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: Ubah nilai Height/Width menyesuaikan ukuran lebar dan tinggi gambar Anda atau biarkan secara default.

2. Tambahkan Javascript

Agar bekerja, maka bubuhkan pula JS ini pada bagian atas </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'/>

3. Edit HTML

Terakhir, jangan lupa 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs57CDIAhadZ1vNAnKxpNivIqrHA6ygDrLuSict7S_zvz-vdoJh0ZbTPzflkI22Y-Y_c0Y_xwEXNSFMotX-5EIjVQ2VLDbehUQU6FuK3Zi94TE2I7AZKGhA3lqnZs39czs4UnSdD5KxslO/s0/gambar-demo1.jpg" title="slideshow1"/></div>
<div class="carousel-cell"><img alt="slideshow2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_ldBzkWGvEQehPAtjjNo5zcz-T0fAnom8A8H9LDQXj96TuKg2mX_W5BOv39atgcSyKrWlPtCK70noZ5wkl9cNG2PyFIDttH7NCKKi47SnmaM3EdZqF4uEaXqc5at_xMWiwbCBDCD4sdVD/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>

Catatan Ganti alamat URL dan video dengan milik Sobat.

Tips Pro

Slideshow seringkali meninggalkan sedikit masalah pada melambatnya laman web, karena menyertakan sejumlah lapisan gambar ke postingan.

ketika seseorang datang mengunjungi Blog Anda, maka pengalaman pengguna adalah prioritas utama. Sedangkan secara teknis, ini meninggalkan dampak terhadap kecepatan loading.

Nah, disinilah kita perlu mensiasatinya dengan cara Compress photo terlebih dahulu sebelum diupload ke artikel.

Juga, usahakan jangan terlalu banyak memasukkan konten (Foto atau Video) agar halaman tidak berat.

Penutup

Demikianlah cara membuat slideshow di Blogger untuk mempercantik postingan sekaligus menyederhanakan konten Anda. Selamat mencobanya, terimakasih sudah mampir Sob.