Showing posts with label Slide Show auto CSS 3. Show all posts
Showing posts with label Slide Show auto CSS 3. Show all posts

Memasang Slide Show auto CSS 3 A 1 menggunakan kode CSS dan HTML yang menampilkan gambar di webblog secara otomatis tampil bergantian. Berikut cara penerapannya : . Login ke akun blog klik edit HTML  temukan kode ]]></b:skin> gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin>   dan klik simpan selesai
.my-slideshow, .my-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .my-slideshow:after { content: ''; background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left; } .my-slideshow li span { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; color: transparent; background-size: cover; background-position: 50% 50%; background-repeat: none; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 36s linear infinite 0s; -moz-animation: imageAnimation 36s linear infinite 0s; -o-animation: imageAnimation 36s linear infinite 0s; -ms-animation: imageAnimation 36s linear infinite 0s; animation: imageAnimation 36s linear infinite 0s; } .my-slideshow li div { z-index: 1000; position: absolute; bottom: 30px; left: 0px; width: 100%; text-align: center; opacity: 0; color: #fff; -webkit-animation: titleAnimation 36s linear infinite 0s; -moz-animation: titleAnimation 36s linear infinite 0s; -o-animation: titleAnimation 36s linear infinite 0s; -ms-animation: titleAnimation 36s linear infinite 0s; animation: titleAnimation 36s linear infinite 0s; } .my-slideshow li div h3 { font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 240px; padding: 0; line-height: 200px; } .my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuo0b_MA0K37HZUHNhH4OA8g9bpzzxJeiEFcptmlFSWbQpB00f7nVE53fFJnIkDUSHzMU4rjZrIQooVNftqkw2hPS-4kkyp2pPuMzrYwYdvnyejT-9NrmXm0KwJ8gjvGTGnBEVP5h2lIcX/s1600-r/spMys2010a1.jpg) } .my-slideshow li:nth-child(2) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKVncapa1cTzVzVP4KeqV2tf_8nW2EYSrA8rJxaEImhNhJHWEK9MzoNIDMlzzXzRJbk0TDfclaI1I3M57NALGF_zVvG-cc7ab1DhJQwUWQwNoFP1fqO1mrZSP1XICcPyBsNmcOxwuJZ3I/s1600-r/spMys2010s3.jpg); -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9KTHiFAozIQehEIEY0UFC-EJ1ik_i2IsIqDPcxYHhf_ZFqpLqBCN2Y4wkPR6ir-WYlHfjZKs3DDpy9KcpCaX0fXGSPaOMI04MpZOcTXv1HWfLl7oxR7G5n1vd9xoDtAWzozWplpMd2ej0/s1600-r/spMys2010s2.jpg ); -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQ6RFG8jWGzAwk8TL3I3NFPozwl3mNow_NtBeGZkYyL2akTx0aNoqmOChUifWs2F8yxrSkq-ib9FMd5y5wUa62yp9ZAeiIYRys6tDhyIJ5hyRzyvtyC2B-6IWzDiCPcXCoxvH6g3qS9uM/s1600-r/01mys2010.jpg); -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzhBZzIHczVoeiCqeIUuGsk08EWUU8UHAmlA5wqEkkwtCCp_Ly_KFo8JlCL_p9WYRncfsFS5OwoVbHU9Q-2xRQRB9i0Y0qCgPs9lHV7bxQ0o3aLGeNQP2o3YUYVDoRJVnjcPj7lXyU38fG/s1600-r/03mys2010.jpg); -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVPuJ8q7CnqVUULvruU1k-ty6ncCLUKTR0lB5Yx5nj4oIbinmOoiu7SYLTX2hm8lie19Ma8dO2g9b2Q1Q6WzLZLU9isB-qFVX_nPqR4XRV_4ficCnNMxg7gN1sLPh3xJ72egoOpoafTr0U/s1600-r/sp.jpg); -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } .my-slideshow li:nth-child(2) div { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } .my-slideshow li:nth-child(3) div { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } .my-slideshow li:nth-child(4) div { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } .my-slideshow li:nth-child(5) div { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } .my-slideshow li:nth-child(6) div { -webkit-animation-delay: 30s; -moz-animation-delay: 30s; -o-animation-delay: 30s; -ms-animation-delay: 30s; animation-delay: 30s; } /* Animation for the slideshow images */ @-webkit-keyframes imageAnimation { 0% { opacity: 0; -webkit-animation-timing-function: ease-in; } 8% { opacity: 1; -webkit-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes imageAnimation { 0% { opacity: 0; -moz-animation-timing-function: ease-in; } 8% { opacity: 1; -moz-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes imageAnimation { 0% { opacity: 0; -o-animation-timing-function: ease-in; } 8% { opacity: 1; -o-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes imageAnimation { 0% { opacity: 0; -ms-animation-timing-function: ease-in; } 8% { opacity: 1; -ms-animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } /* Animation for the title */ @-webkit-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-moz-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-o-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @-ms-keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } @keyframes titleAnimation { 0% { opacity: 0 } 8% { opacity: 1 } 17% { opacity: 1 } 19% { opacity: 0 } 100% { opacity: 0 } } /* Show at least something when animations not supported */ .no-cssanimations .my-slideshow li span{ opacity: 1; } @media screen and (max-width: 1140px) { .my-slideshow li div h3 { font-size: 140px } } @media screen and (max-width: 600px) { .my-slideshow li div h3 { font-size: 80px } }
Kemudian klik entri halaman baru HTML copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow"> <li><span>Gambar 01</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 02</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 03</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 04</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 05</span><div> <h4> Your Text  </h4> </div> </li> <li><span>Gambar 06</span><div> <h4>  </h4> </div> </li> </ul>
Penjelasan : Ganti Link gambar dan teks yang berwarna orange sesuai keinginan untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010