membuat slideshow galeri otomatis di postingan blog

1 / 3

Caption Text

2 / 3

Caption Text

3 / 3

Caption Text

❮ ❯

Cara Membuat Galeri Foto Slideshow Di Postingan Blog - Menempatkan foto didalam postingan blog merupakan cara yang umumnya dilakukan oleh seorang blogger untuk membuat artikelnya menjadi lebih bermakna. Banyak model penempatan foto didalam postingan blog, salah satunya adalah dengan model slideshow. Slideshow foto adalah tayangan dari beberapa foto yang berubah-ubah secara otomatis. 

Dengan tampilan slideshow, maka penempatan foto didalam postingan blog tidak menggunakan banyak ruang, sehingga postingan terlihat lebih rapih. Caranya pun cukup mudah..

Langkah ke-1 : Buat Postingan Baru dan Masuk Bagian HTML kemudian Copy semua code dibawah ini 

<div class="slideshow-container">

  <!-- Photo slideshow responsive ( Bisa kalian Tambahkan atau kurangkan ) -->
  <div class="mySlides fade">
    <div class="numbertext">1 / 3</div>
    <img src="linkphoto.jpg" style="width:100%">
    <div class="text">Tulisan diphoto</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">2 / 3</div>
    <img src="linkphoto2.jpg" style="width:100%">
    <div class="text">Tulisan diphoto2</div>
  </div>

  <div class="mySlides fade">
    <div class="numbertext">3 / 3</div>
    <img src="linkphoto3" style="width:100%">
    <div class="text">Tulisan diphoto3</div>
  </div>

  <!-- Tombol Next and previous -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- Titik lingkaran (Bisa kalian tambahkan atau kurangkan )  -->
<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>
       

Catatan :

1.Warna merah : 

untuk link serta caption photo ( jika ingin menambahkan photo tinggal copy  code dibawah ini dan paste disebelum tombol next and previous button )

<div class="mySlides fade">
    <div class="numbertext">4 / 4</div>
    <img src="linkphoto3" style="width:100%">
    <div class="text">Tulisan diphoto3</div>
  </div>

Jangan lupa ubah nomer ( 4/  4) sesuai jumlah photo dan urutan photo format (  urutan / jumlah )

2.Warna Biru :

Untuk tombol buletan buletan kecil dibawah photo ( Jika ingin menyesuaikan dengan jumlah photo kalian ) tinggal copy code dibawah ini

 <span class="dot" onclick="currentSlide(4)"></span>

Tempelkan tempat dibawah paling akhir </span> dan sebelum </div>

Langkah ke-2 : Copy semua code dibawah ini dan Tempelkan paling atas sebelum code yang pertama tadi 

<style>
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  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;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
} 

</style>
 

Langkah ke-3 : Kemudia Copy dan Tempelkan Code dibawah ini tepat paling bawah setelah code pertama tadi (dibawah </div> )

<Script>
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
}
</Script>

Selesai.... 

Gunakan Code dibawah ini Agar slideshow photo menjadi Otomatis dan letakkan tepat dibawah code sebelumnya ( code diletakkan paling bawah )

<Script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 2000); // (2000= setiap 2 detik photo akan diganti ) bisa ditambahkan 
}
</Script>

Itulah cara sederhana untuk membuat sebuah slideshow photo secara otomatis..Mudah Bukan???