Inilah cara menampilkan slideShow gambar di blogspot

Panduan lengkap: Inilah cara menampilkan  slide show  gambar di blogspot! 

 1. Menggunakan Layanan Slideshow Pihak Ketiga dengan Kode Embed (Cara Termudah dan Direkomendasikan)

Ini adalah cara paling mudah dan fleksibel untuk menambahkan slideshow ke Blogspot. Anda menggunakan layanan pihak ketiga yang membuat slideshow secara online, lalu mereka memberikan kode embed yang bisa Anda tempelkan di postingan Blogger Anda.

Layanan Slideshow Pihak Ketiga yang Populer (dan seringkali gratis):

• Google Photos (Album): Jika Anda sudah menggunakan Google Photos, ini adalah cara yang sangat mudah.

  • Kelebihan: Gratis, terintegrasi dengan akun Google Anda, mudah dibuat.

  • Kekurangan: Kontrol kustomisasi slideshow terbatas, tampilan mungkin sedikit sederhana.

  Langkah-langkah menggunakan Google Photos (Album):

  1. Buat Album di Google Photos: Unggah foto-foto yang ingin Anda gunakan untuk slideshow ke dalam album di Google Photos Anda.

  2. Bagikan Album (Setel ke "Siapa saja yang memiliki link"): Di album Google Photos, klik ikon "Bagikan", lalu pilih "Dapatkan link". Pastikan opsi privasinya diatur ke "Siapa saja yang memiliki link dapat melihat".

  3. Dapatkan Kode Embed (Jika Tersedia): Terkadang Google Photos menyediakan opsi "Embed" (ikon <>). Jika ada, salin kode embed tersebut. Jika tidak ada opsi "Embed" langsung di Google Photos, lanjut ke langkah berikutnya menggunakan link.

  4. Gunakan Kode Iframe (Jika tidak ada kode embed langsung): Jika tidak ada kode embed langsung, Anda bisa menggunakan link album Google Photos dan membungkusnya dalam kode <iframe> di postingan Blogger Anda.

     • Contoh Kode Iframe:

             <iframe src="LINK_ALBUM_GOOGLE_PHOTOS_ANDA" width="640" height="480" frameborder="0" allowfullscreen></iframe>
           

       Ganti LINK_ALBUM_GOOGLE_PHOTOS_ANDA dengan link album Google Photos yang Anda bagikan tadi. Atur width dan height sesuai keinginan Anda.

  5. Tempelkan Kode di Postingan Blogger:

     • Buka postingan Blogger Anda dalam mode "HTML View" (bukan "Compose View").

     • Tempelkan kode embed (atau kode iframe) di tempat yang Anda inginkan slideshow muncul.

     • Kembali ke "Compose View" untuk melihat pratinjau (opsional).

     • Publikasikan postingan Anda.

• Layanan Slideshow Online Lainnya (Contoh: Slidershare, Canva, dll.): Ada banyak layanan online lain yang khusus untuk membuat slideshow presentasi atau gambar. Beberapa mungkin menawarkan opsi embed gratis atau berbayar.

  • Contoh Layanan:

    • Slidershare: Lebih fokus pada presentasi, tapi bisa digunakan untuk slideshow gambar.

    • Canva: Platform desain yang juga bisa membuat slideshow dan menyediakan opsi embed.

    • Flickr: (Mungkin memerlukan akun Pro untuk embed slideshow yang lebih baik).

    • Cari di Google dengan kata kunci "free slideshow embed widget" untuk menemukan lebih banyak opsi.

  Langkah-langkah Umum (untuk layanan slideshow online lainnya):

  1. Buat Slideshow di Layanan Pihak Ketiga: Unggah gambar Anda ke layanan slideshow pilihan Anda, atur transisi, kecepatan, dan opsi lainnya sesuai keinginan.

  2. Cari Opsi "Embed" atau "Bagikan": Biasanya layanan slideshow akan menyediakan tombol atau opsi untuk "Embed" atau "Bagikan" (seringkali ikon <> atau "Share").

  3. Salin Kode Embed: Salin kode embed yang diberikan oleh layanan tersebut.

  4. Tempelkan Kode di Postingan Blogger: Ikuti langkah 5 di atas (untuk Google Photos - tempel di "HTML View").

Kelebihan Metode Pihak Ketiga:

• Mudah digunakan: Tidak perlu coding, antarmuka visual untuk membuat slideshow.

• Fleksibel: Banyak pilihan layanan dengan berbagai fitur dan desain.

• Responsif: Slideshow seringkali responsif dan tampil baik di berbagai perangkat.

Kekurangan Metode Pihak Ketiga:

• Bergantung pada layanan eksternal: Jika layanan tersebut tutup atau ada masalah, slideshow Anda mungkin tidak berfungsi.

• Kustomisasi terbatas: Kontrol desain dan fitur mungkin terbatas pada opsi yang disediakan layanan.

• Iklan (pada layanan gratis tertentu): Beberapa layanan gratis mungkin menampilkan iklan di slideshow Anda.

2. Menggunakan Kode JavaScript dan CSS Manual (Lebih Teknis)

Jika Anda memiliki pengetahuan dasar tentang HTML, CSS, dan JavaScript, Anda bisa membuat slideshow sendiri langsung di postingan Blogger Anda. Ini memberi Anda kontrol penuh atas desain dan fungsionalitas, tetapi lebih rumit.

Langkah-langkah Umum (Konsep Dasar):

1. Struktur HTML: Buat struktur HTML dasar untuk slideshow di postingan Anda (dalam "HTML View"). Ini biasanya melibatkan:

   • <div> container untuk slideshow.

   • <div> atau <img> untuk setiap slide gambar.

   • Tombol navigasi (opsional: "prev", "next").

   • Elemen indikator (opsional: titik-titik navigasi).

   • Contoh Struktur HTML Dasar:

           <div class="slideshow-container">
       <div class="slide fade">
         <img src="URL_GAMBAR_1" style="width:100%">
       </div>
       <div class="slide fade">
         <img src="URL_GAMBAR_2" style="width:100%">
       </div>
       <!-- ... tambahkan lebih banyak slide ... -->
       <a class="prev" onclick="plusSlides(-1)">❮</a>
       <a class="next" onclick="plusSlides(1)">❯</a>
     </div>
         

     IGNORE_WHEN_COPYING_START

     Use code with caution.Html

     IGNORE_WHEN_COPYING_END

     Ganti URL_GAMBAR_1, URL_GAMBAR_2, dll. dengan URL gambar Anda yang diunggah ke Blogger atau hosting gambar lainnya.

2. CSS Styling: Tambahkan kode CSS di bagian <head> template Blogger Anda atau dalam tag <style> di postingan Anda (dalam "HTML View") untuk mengatur tampilan slideshow:

   • Ukuran container slideshow.

   • Tata letak gambar.

   • Efek transisi (misalnya "fade" dalam contoh HTML).

   • Gaya tombol navigasi dan indikator (jika ada).

   • Contoh CSS Dasar (Tambahkan di <head> template atau <style> di postingan):

           .slideshow-container {
       max-width: 1000px; /* Atur lebar maksimal slideshow */
       position: relative;
       margin: auto;
     }
     
     .slide {
       display: none; /* Awalnya sembunyikan semua slide */
     }
     
     .fade {
       animation-name: fade;
       animation-duration: 1.5s;
     }
     
     @keyframes fade {
       from {opacity: .4}
       to {opacity: 1}
     }
     
     .prev, .next { /* Gaya tombol navigasi */
       cursor: pointer;
       position: absolute;
       top: 50%;
       width: auto;
       margin-top: -22px;
       padding: 16px;
       color: white;
       font-weight: bold;
       font-size: 18px;
       transition: 0.6s ease;
       border-radius: 0 3px 3px 0;
       user-select: none;
     }
     
     .next {
       right: 0;
       border-radius: 3px 0 0 3px;
     }
     
     .prev:hover, .next:hover {
       background-color: rgba(0,0,0,0.8);
     }
         

     IGNORE_WHEN_COPYING_START

     Use code with caution.Css

     IGNORE_WHEN_COPYING_END

3. JavaScript Functionality: Tambahkan kode JavaScript di bagian <footer> template Blogger Anda atau dalam tag <script> di postingan Anda (dalam "HTML View") untuk mengatur logika slideshow:

   • Fungsi untuk menampilkan slide saat ini dan menyembunyikan slide lainnya.

   • Fungsi untuk transisi otomatis (jika diinginkan).

   • Fungsi untuk navigasi (tombol "prev", "next", indikator).

   • Contoh JavaScript Dasar (Tambahkan di <footer> template atau <script> di postingan):

           let slideIndex = 1;
     showSlides(slideIndex);
     
     function plusSlides(n) {
       showSlides(slideIndex += n);
     }
     
     function currentSlide(n) {
       showSlides(slideIndex = n);
     }
     
     function showSlides(n) {
       let i;
       let slides = document.getElementsByClassName("slide");
       if (n > slides.length) {slideIndex = 1}
       if (n < 1) {slideIndex = slides.length}
       for (i = 0; i < slides.length; i++) {
         slides[i].style.display = "none";
       }
       slides[slideIndex-1].style.display = "block";
     }
         

     IGNORE_WHEN_COPYING_START

     Use code with caution.JavaScript

     IGNORE_WHEN_COPYING_END

Kelebihan Metode Manual:

• Kustomisasi penuh: Anda memiliki kontrol penuh atas desain, fitur, dan perilaku slideshow.

• Tidak bergantung pada layanan eksternal: Slideshow akan berfungsi selama kode Anda benar dan gambar tersedia.

• Potensi performa lebih baik: Kode yang dioptimalkan dengan baik bisa lebih ringan dan cepat dibandingkan embed pihak ketiga.

Kekurangan Metode Manual:

• Membutuhkan pengetahuan teknis: Memahami HTML, CSS, dan JavaScript diperlukan.

• Lebih rumit dan memakan waktu: Membuat dan memelihara kode sendiri lebih kompleks dibandingkan menggunakan layanan pihak ketiga.

• Potensi kesalahan: Jika kode tidak ditulis dengan benar, slideshow mungkin tidak berfungsi atau rusak.

3. Menggunakan Fitur "Album Web" Picasa (Mungkin Sudah Tidak Relevan)

Dulu, ada cara menggunakan album web Picasa (layanan foto Google sebelum Google Photos) untuk membuat slideshow di Blogspot. Namun, Picasa Web Albums sudah tidak aktif dan digantikan Google Photos. Metode ini mungkin tidak lagi berfungsi atau tidak direkomendasikan. Sebaiknya gunakan metode 1 atau 2 di atas.

Pilih Metode yang Paling Sesuai:

• Untuk kemudahan dan kecepatan: Gunakan metode 1 (layanan slideshow pihak ketiga), terutama Google Photos jika Anda sudah menggunakannya. Ini adalah pilihan terbaik untuk sebagian besar pengguna Blogspot.

• Untuk kontrol penuh dan kustomisasi (jika Anda punya skill teknis): Gunakan metode 2 (kode JavaScript dan CSS manual). Ini cocok jika Anda ingin desain slideshow yang unik dan tidak ingin bergantung pada layanan eksternal.