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.
DEMO
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!
