02 August 2017

Cara Membuat Slideshow Dalam Blog Post


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.

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 yourslf 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😄     

Contoh otomatis slideshow:

W3.CSS

Automatic Slideshow

14 comments:

  1. makasih sharingnya mbk, sangat bermanfaat. pengen nyoba bkin jadinya.

    ReplyDelete
    Replies
    1. Monggo dicoba mba biar makin catchy artikelnya

      Delete
  2. Thankyou info nya mbak, jadi pengen nyoba juga

    ReplyDelete
  3. Kereeeeen, mb. Pengen coba ih. Makasih ya infonya.

    ReplyDelete
  4. Asik nih buat hiasan blog, mejengin slideshow gambar....

    ReplyDelete
  5. Apik, Mbak. Pengeeeen.
    Tapi kalo pake HP agak ribet ini 😂😂
    Nasib Emak2 ngeblognya pake HP.

    ReplyDelete
    Replies
    1. Bisa mba pake otg nti tgl colokin mouse

      Delete
  6. Wah makasih sharingnya mbak un nanti kucobain ya, berarti harus pake laptop ya gak bisa pake tab ☺

    ReplyDelete
    Replies
    1. Kl ga pake otg hrs pake lepi biar leluasa mba

      Delete
  7. makasih tutorialnya mba, oh ya saya yang di grup KEB, salam kenal mba ^^

    ReplyDelete

Terimakasih kunjungan dan komentarnya, mohon tidak mencantumkan link hidup di kolom komentar ya. Salam Blogging!