Cara membuat gambar slider show keren di blogger atau website

Gambar slider show artinya gambar berjalan atau bergeser sendiri , slider show bisa di ubah dengan gambar desain sesuai pilihan. Gambar slider show biasanya di pasang di blog atau website , dengan gambar di desain slider show , website atau blog akan terlihat menarik dan profesional.

Biasanya gambar pada postingan situs website atau blogspot itu diam, akan cepat bosan. Tidak salah jika Anda ingin mencoba membuat gambar diam menjadi bergeser otomatis. Cara membuat gambar slider show tentu sangat mudah dan simpel, Dengan menambahkan kode html/javascript ke dalam template blog .

Untuk mengetahui seperti apa slideshow yang akan di buat di blogger atau website kalian Bisa lihat , slider show yang sudah jadi bisa tinjau berikut

Langkah pertama yang harus dilakukan adalah kunjungi Dashboard blogger.

1. Login blogger

2. Edit html

Setelah masuk di dalam template blog , lalu Kalian cari kode ]]><b:skin>.

Tempatkan kode CSS di bawah ini tepat di atas kode ]]><b:skin>.

3. Kode CSS

@keyframes slidy {
  0% {
    left: 0%;
  }
  20% {
    left: 0%;
  }
  25% {
    left: -100%;
  }
  45% {
    left: -100%;
  }
  50% {
    left: -200%;
  }
  70% {
    left: -200%;
  }
  75% {
    left: -300%;
  }
  95% {
    left: -300%;
  }
  100% {
    left: -400%;
  }
}

body {
  margin: 0;
}
div#slider {
  overflow: hidden;
}
div#slider figure img {
  width: 20%;
  float: left;
}
div#slider figure {
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite;
}

Setelah kode CSS di atas sudah di tambahkan ke template blogger atau blogspot kalian simpan.

4. Kode html

 <base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">

<div id="slider">

  <figure>

    <img src="#" alt>

    <img src="#" alt>

    <img src="#" alt>

    <img src="#" alt>

    <img src="#" alt>

  </figure>

</div>