Cara Membuat Slideshow Dalam Blog Post

Table of Contents

Pernahkan melihat slideshow dalam sebuah presentasi dengan menggunakan Power Point? Kalau pernah saya ingin sedikit berbagi tips dan trik bagaimana menampilkan slideshow tapi bukan dengan power point melainkan dengan kode html. Dan nantinya slideshow ini bisa muncul sebagai penunjang artikel postingan blog.

Cara ini bisa diterapkan dalam semua platform blog seperti blogspot, wordpress, tumblr atau platform lainnya. Jadi blog tidak akan terasa monoton. Soal bagaimana Cara Membuat Blog di Blogspot atau Cara Membuat Blog di WordPress bisa kamu googling sendiri ya. Mudah banget kok.

Menampilkan slideshow yang terdiri dari beberapa buah gambar/ foto juga salah satu cara buat yang pengen banyak gambar ada dalam satu artikel tapi ga mengesampingkan jumlah kata itu sendiri. Karena salah satu indikator blog yang oke menurut Google adalah 'semok' informasi dalam bentuk tulisan bukan dalam bentuk gambar. #Plak lalu tabok diri sendiri, soalnya nulis minimal 500 kata di satu post itukan bukan hal mudah ya 😒. Duh ribet amat sih Om Google!

Slideshow yang ingin dimasukkan ke dalam artikel blogspot ini bisa dipilih mau yang model apa, ada yang bisa diklik supaya berganti gambar, atau berupa slideshow otomatis alias carousel.

Langkah pertama:
1. Gunakan foto yang sudah diungggah di situs penyedia foto gratis seperti pixabay atau pexels, supaya kita ga kena tuntutan hak cipta ya teman-teman. Salin script foto dengan cara klik kanan, copy image location.

2. Atau gunakan dokumen pribadi 
Jika memang menggunakan dokumen pribadi yang belum diunggah, artinya foto-foto tersebut harus diupload terlebih dahulu. Karena yang akan kita gunakan nantinya adalah kode html berekstensi .jpg
 
Bagaimana caranya?
Saya selama ini memakai cara 'kuno', yaitu dengan mengupload foto satu persatu ke dalam post kosong di blogspot.

Jika sudah terupload semua foto yang diinginkan, klik kanan pada foto, pilih copy link location dan paste-kan ke notepad terlebih dahulu. Usahakan kode jpg sudah sesuai urutan yang diinginkan jadi nantinya mudah untuk paste ke template javascript yang diinginkan.

Langkah berikutnya:
1. Buka website berikut ini https://www.w3schools.com/w3css/w3css_slideshow.asp (copas ke browser ya)

2. Tentukan jenis slideshow yang diinginkan, manual, otomatis atau bisa juga pengen bikin slideshow berupa tulisan aja.

3. Cari tulisan Try It Yourself dibagian bawah kotak kode untuk memulai buat slideshowmu sendiri

try it yourself dan mulailah mencoba

4. Setelah terbuka halaman baru, copaskan satu persatu kode jpg yang ada di notepad ke area berwarna biru/ di dalam tanda petik dua (lebih jelas lihat gambar ya). Ingat ya tanda petik dua jangan dihapus loh

masukkan kode jpg gambar ke javascript

5. JIka sudah tercopas semua foto yang diinginkan, klik RUN untuk melihat hasil
6. Kalau udah oke, sekarang salin semua kode yang ada di dalam frame dan buka postingan yang akan diberi slideshow
7. Ubah ke mode html, dan letakkan di bagian yang diinginkan. Jika postingan sudah selesai, bisa langsung dipublish.

Taraaa. sekarang post dalam blogmu sudah ada slideshownya kan 👌. Gimana jadi makin kece tho.
Contoh otomatis slideshow:

Automatic Slideshow