CSS3 Slideshow Full Screen B.1

         

Memasang Slide Show auto CSS 3
menggunakan animation linear infinite
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: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-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: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.my-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsJkTfxY69wyzjUAR749FjiTIIEGV35lpXdWxIu-7ZwFD7SVfndp_vpqKuRPHjFvd3mc7BXHx9VtGd0JvJnUe_4wCWwicFUhp1zKUASL6Z-aSbhqg15wpcMlUjB1JmiikNenbvhOrPC69a/s1600/Sunset+Wallpapers.jpg) }
.my-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw_OGDhe4A8kwcZZKkJ23DO0AYDiutIT3TVLt9DCO5jMJXI52vHjlTMw421vb_ie1nPp5Ixl52MihSSeV_b942NEWaQvFVXbpmbP9qIHSjAzY4optp4m2AEg5iXzv7OgDgiHduw0Ltx6eb/s1600/Sunset+Wallpapers+%25286%2529.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/AVvXsEiOJyTSXQ2z-RTGsB3Seq1q4DF_xS7JFG9-dQIAWh2GD1cNLHYVT0Ic4vd2Aea-yV2vRnTInde0ROB2pZ2IzKF15yGONPbicgKpfE9oN8cl3YJ1omLYFhDhciw1DyI_37qtgb_HievPFpy4/s1600-r/Mys2010b.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/AVvXsEiD5U_dUOo5pWkMuvAAqpWWaqo8KCLsIvEAizHoQIjXo-IHmJPC5wCnG3AgfN5F8O_o3Hbz9LXS6rKLVYldF99XBqyKdUhG2wBYxYltuFdrMP1jQ_fy_KfKOp7eGHZXqPVNoHy_JDeWkKY/s1600-r/Landscapes-3-Mys2010.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/AVvXsEg8zhn1Y_Ox3rB1GfEbsPDR3Q047cUKTLgHEAHd4ukt1M3lbr-R_c2QUarF8PsIclvI46wHHpZC4B1mr6ODKFlAje_k2sGv9pmCUqYTpOyfbq-TYpK-nEcERemluk0oZWwqW63Zr4nH5Tlz/s1600-r/Mys2010a.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/AVvXsEjdQTd89j1NlfwXzL6KkWqKcpXHmuEde1x9l_PpY_czzvoLK3TaggWgx3RWRWxbVz7ZZ_a1GUtZq7pFc06hai9eVDOfSC46IlZQj5RBrruwewx6DKcRk8kVMKfG9aQA9iIvNueRDNDvl7M/s1600-r/Landscapes-5-Mys2010.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;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
 0% {
     opacity: 0;
     -ms-transform: translateX(200px);
 }
 8% {
     opacity: 1;
     -ms-transform: translateX(0px);
 }
 17% {
     opacity: 1;
     -ms-transform: translateX(0px);
 }
 19% {
     opacity: 0;
     -ms-transform: translateX(-400px);
 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
@keyframes titleAnimation {
 0% {
     opacity: 0;
     transform: translateX(200px);
 }
 8% {
     opacity: 1;
     transform: translateX(0px);
 }
 17% {
     opacity: 1;
     transform: translateX(0px);
 }
 19% {
     opacity: 0;
     transform: translateX(-400px);
 }
 25% { opacity: 0 }
 100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-Slide  li span{
 opacity: 1;
}
@media screen and (max-width: 1140px) {
.my-Slide  li div h3 { font-size: 60px }
}
@media screen and (max-width: 600px) {
.my-Slide  li div h3 { font-size: 50px }
}

Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut

<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h3>Myscript2010 </h3>
</div>
</li>
<li><span>Gambar 02</span><div>
<h3>Belajar Webblog </h3>
</div>
</li>
<li><span>Gambar 03</span><div>
<h3>Full Screen </h3>
</div>
</li>
<li><span>Gambar 04</span><div>
<h3>Desainer </h3>
</div>
</li>
<li><span>Gambar 05</span><div>
<h3>Copyright:2015 </h3>
</div>
</li>
<li><span>Gambar 06</span><div>
<h3>Cibeber Cimahi </h3>
</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

DEMO SHOW