Posted by Aak
Aak-share.com Updated at: 11:53:00 AM

Cara Membuat Banner Auto Slideshow Dengan CSS

5 comments:
Cara Membuat Banner Auto Slider Show Dengan CSS ~ Banyak sekali Iklan atau banner yang bisa Anda temukan di Internet, seperti iklan kanan dan kiri , iklan baris dan masih banyak lagi. Anda juga tentunya pernah melihat tampilan Slideshow di atas header dengan berbagai effect, seperti pada Slideshow effect Transisi tampilannya begitu menarik karena terdapat puluhan animasi yang disediakan dengan bantuan menggunakan JQuery dan easing effect.

Memperindah dan membuat tampilan pada Banner lebih menarik cukup penting agar pengunjung tertarik untuk membuka halaman tersebut, untuk membuat tampilan banner menjadi menarik Anda bisa mencoba memasang Banner Auto Slideshow. Kabar baiknya lagi, pembuatan Slideshow pada Banner hanya dengan menggunakan peroperti CSS tanpa menggunakan jQuery.



Pada Banner Auto Slideshow memiliki ukuran 1200 x 500 , untuk Anda yang tertarik ingin memasang Banner Auto Slideshow berikut ini langkah-langkahnya :

1. Login keakun Blogger
2. Pilih Template > Klik Edit HTML
3. Kemudian Anda cari kode ]]></b:skin>
4. Lalu salin kode dibawah ini dan pasangkan sebelumnya atau di atasnya.

.container {
  display: block;
  overflow: hidden;
  position: relative;
  height: 800px;
  max-width: 1200px;
  margin: 20px auto;
}
.container > * {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-shadow: 0 20px 12px -12px #060606;
  -moz-box-shadow: 0 20px 12px -12px #060606;
  box-shadow: 0 20px 12px -12px #060606;
}

@-webkit-keyframes generated0 {
  0% {
    opacity: 1;
  }
  6.11111% {
    opacity: 1;
  }
  11.11111% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated0 {
  0% {
    opacity: 1;
  }
  6.11111% {
    opacity: 1;
  }
  11.11111% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated0 {
  0% {
    opacity: 1;
  }
  6.11111% {
    opacity: 1;
  }
  11.11111% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated0 {
  0% {
    opacity: 1;
  }
  6.11111% {
    opacity: 1;
  }
  11.11111% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated1 {
  0% {
    opacity: 0;
  }
  6.11111% {
    opacity: 0;
  }
  11.11111% {
    opacity: 1;
  }
  17.22222% {
    opacity: 1;
  }
  22.22222% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated1 {
  0% {
    opacity: 0;
  }
  6.11111% {
    opacity: 0;
  }
  11.11111% {
    opacity: 1;
  }
  17.22222% {
    opacity: 1;
  }
  22.22222% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated1 {
  0% {
    opacity: 0;
  }
  6.11111% {
    opacity: 0;
  }
  11.11111% {
    opacity: 1;
  }
  17.22222% {
    opacity: 1;
  }
  22.22222% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated1 {
  0% {
    opacity: 0;
  }
  6.11111% {
    opacity: 0;
  }
  11.11111% {
    opacity: 1;
  }
  17.22222% {
    opacity: 1;
  }
  22.22222% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated2 {
  0% {
    opacity: 0;
  }
  17.22222% {
    opacity: 0;
  }
  22.22222% {
    opacity: 1;
  }
  28.33333% {
    opacity: 1;
  }
  33.33333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated2 {
  0% {
    opacity: 0;
  }
  17.22222% {
    opacity: 0;
  }
  22.22222% {
    opacity: 1;
  }
  28.33333% {
    opacity: 1;
  }
  33.33333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated2 {
  0% {
    opacity: 0;
  }
  17.22222% {
    opacity: 0;
  }
  22.22222% {
    opacity: 1;
  }
  28.33333% {
    opacity: 1;
  }
  33.33333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated2 {
  0% {
    opacity: 0;
  }
  17.22222% {
    opacity: 0;
  }
  22.22222% {
    opacity: 1;
  }
  28.33333% {
    opacity: 1;
  }
  33.33333% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated3 {
  0% {
    opacity: 0;
  }
  28.33333% {
    opacity: 0;
  }
  33.33333% {
    opacity: 1;
  }
  39.44444% {
    opacity: 1;
  }
  44.44444% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated3 {
  0% {
    opacity: 0;
  }
  28.33333% {
    opacity: 0;
  }
  33.33333% {
    opacity: 1;
  }
  39.44444% {
    opacity: 1;
  }
  44.44444% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated3 {
  0% {
    opacity: 0;
  }
  28.33333% {
    opacity: 0;
  }
  33.33333% {
    opacity: 1;
  }
  39.44444% {
    opacity: 1;
  }
  44.44444% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated3 {
  0% {
    opacity: 0;
  }
  28.33333% {
    opacity: 0;
  }
  33.33333% {
    opacity: 1;
  }
  39.44444% {
    opacity: 1;
  }
  44.44444% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated4 {
  0% {
    opacity: 0;
  }
  39.44444% {
    opacity: 0;
  }
  44.44444% {
    opacity: 1;
  }
  50.55556% {
    opacity: 1;
  }
  55.55556% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated4 {
  0% {
    opacity: 0;
  }
  39.44444% {
    opacity: 0;
  }
  44.44444% {
    opacity: 1;
  }
  50.55556% {
    opacity: 1;
  }
  55.55556% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated4 {
  0% {
    opacity: 0;
  }
  39.44444% {
    opacity: 0;
  }
  44.44444% {
    opacity: 1;
  }
  50.55556% {
    opacity: 1;
  }
  55.55556% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated4 {
  0% {
    opacity: 0;
  }
  39.44444% {
    opacity: 0;
  }
  44.44444% {
    opacity: 1;
  }
  50.55556% {
    opacity: 1;
  }
  55.55556% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated5 {
  0% {
    opacity: 0;
  }
  50.55556% {
    opacity: 0;
  }
  55.55556% {
    opacity: 1;
  }
  61.66667% {
    opacity: 1;
  }
  66.66667% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated5 {
  0% {
    opacity: 0;
  }
  50.55556% {
    opacity: 0;
  }
  55.55556% {
    opacity: 1;
  }
  61.66667% {
    opacity: 1;
  }
  66.66667% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated5 {
  0% {
    opacity: 0;
  }
  50.55556% {
    opacity: 0;
  }
  55.55556% {
    opacity: 1;
  }
  61.66667% {
    opacity: 1;
  }
  66.66667% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated5 {
  0% {
    opacity: 0;
  }
  50.55556% {
    opacity: 0;
  }
  55.55556% {
    opacity: 1;
  }
  61.66667% {
    opacity: 1;
  }
  66.66667% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated6 {
  0% {
    opacity: 0;
  }
  61.66667% {
    opacity: 0;
  }
  66.66667% {
    opacity: 1;
  }
  72.77778% {
    opacity: 1;
  }
  77.77778% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated6 {
  0% {
    opacity: 0;
  }
  61.66667% {
    opacity: 0;
  }
  66.66667% {
    opacity: 1;
  }
  72.77778% {
    opacity: 1;
  }
  77.77778% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated6 {
  0% {
    opacity: 0;
  }
  61.66667% {
    opacity: 0;
  }
  66.66667% {
    opacity: 1;
  }
  72.77778% {
    opacity: 1;
  }
  77.77778% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated6 {
  0% {
    opacity: 0;
  }
  61.66667% {
    opacity: 0;
  }
  66.66667% {
    opacity: 1;
  }
  72.77778% {
    opacity: 1;
  }
  77.77778% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated7 {
  0% {
    opacity: 0;
  }
  72.77778% {
    opacity: 0;
  }
  77.77778% {
    opacity: 1;
  }
  83.88889% {
    opacity: 1;
  }
  88.88889% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated7 {
  0% {
    opacity: 0;
  }
  72.77778% {
    opacity: 0;
  }
  77.77778% {
    opacity: 1;
  }
  83.88889% {
    opacity: 1;
  }
  88.88889% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated7 {
  0% {
    opacity: 0;
  }
  72.77778% {
    opacity: 0;
  }
  77.77778% {
    opacity: 1;
  }
  83.88889% {
    opacity: 1;
  }
  88.88889% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated7 {
  0% {
    opacity: 0;
  }
  72.77778% {
    opacity: 0;
  }
  77.77778% {
    opacity: 1;
  }
  83.88889% {
    opacity: 1;
  }
  88.88889% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes generated8 {
  0% {
    opacity: 0;
  }
  83.88889% {
    opacity: 0;
  }
  88.88889% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes generated8 {
  0% {
    opacity: 0;
  }
  83.88889% {
    opacity: 0;
  }
  88.88889% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes generated8 {
  0% {
    opacity: 0;
  }
  83.88889% {
    opacity: 0;
  }
  88.88889% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes generated8 {
  0% {
    opacity: 0;
  }
  83.88889% {
    opacity: 0;
  }
  88.88889% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.item-1 {
  -webkit-animation: generated0 22.5s infinite;
  -moz-animation: generated0 22.5s infinite;
  -o-animation: generated0 22.5s infinite;
  animation: generated0 22.5s infinite;
}

.item-2 {
  -webkit-animation: generated1 22.5s infinite;
  -moz-animation: generated1 22.5s infinite;
  -o-animation: generated1 22.5s infinite;
  animation: generated1 22.5s infinite;
}

.item-3 {
  -webkit-animation: generated2 22.5s infinite;
  -moz-animation: generated2 22.5s infinite;
  -o-animation: generated2 22.5s infinite;
  animation: generated2 22.5s infinite;
}

.item-4 {
  -webkit-animation: generated3 22.5s infinite;
  -moz-animation: generated3 22.5s infinite;
  -o-animation: generated3 22.5s infinite;
  animation: generated3 22.5s infinite;
}

.item-5 {
  -webkit-animation: generated4 22.5s infinite;
  -moz-animation: generated4 22.5s infinite;
  -o-animation: generated4 22.5s infinite;
  animation: generated4 22.5s infinite;
}

.item-6 {
  -webkit-animation: generated5 22.5s infinite;
  -moz-animation: generated5 22.5s infinite;
  -o-animation: generated5 22.5s infinite;
  animation: generated5 22.5s infinite;
}

.item-7 {
  -webkit-animation: generated6 22.5s infinite;
  -moz-animation: generated6 22.5s infinite;
  -o-animation: generated6 22.5s infinite;
  animation: generated6 22.5s infinite;
}

.item-8 {
  -webkit-animation: generated7 22.5s infinite;
  -moz-animation: generated7 22.5s infinite;
  -o-animation: generated7 22.5s infinite;
  animation: generated7 22.5s infinite;
}

.item-9 {
  -webkit-animation: generated8 22.5s infinite;
  -moz-animation: generated8 22.5s infinite;
  -o-animation: generated8 22.5s infinite;
  animation: generated8 22.5s infinite;
}


5. Simpan Template
6. Selanjutnya pemasangan HTML, Anda salin kode dibawah ini kemudian pasangkan sesuai yang Anda kehendaki bisa di postingan Artikel atau di atas header..

<div class="container">
<a href="URL Tujuan">
<img class="item-1" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-2" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-3" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-4" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-5" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-6" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-7" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-8" src="URL Gambar" />
<a href="URL Tujuan">
<img class="item-9" src="URL Gambar" />
</a></div>


Demikian Cara Membuat Banner Auto Slideshow Dengan CSS.

Semoga bermanfaat!




Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

5 comments

This comment has been removed by a blog administrator.

terimakasih gan, nanti saya coba :)

Balas

terima kasih bang informasinya

Balas