Cara Menciptakan Banner Auto Slideshow Dengan Css

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

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

Demo CODE

Pada Banner Auto Slideshow mempunyai 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 isyarat 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 isyarat dibawah ini lalu pasangkan sesuai yang Anda kehendaki sanggup 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>