Memasang wallpaper pada background blog kita,terlihat menarik dan unik.tapi menggunakan trik ini juga akan membuat blog sobat agak berat karena lamanya proses loading gambar yang akan ditampilkan.
ok,yang pertama buka rancangan=> edit HTML,lalu copy kode html dibawah ini di bawah kode <body>
yang kedua,pilih/COPY SALAH SATU Style/CSS yang ada dibawah ini,Sesuai yang ada dicontoh.
Kalau sudah dicopy,paste di atas kode ]]></b:skin> ,lalu simpan dan lihat hasilnya.
Saya ingatkan,tidak semua template blogger sobat bisa menggunakan trik ini,jika gagal,maka akan menjadi speri dibawah ini:
saran saya,cek lagi template blogger sobat,mungkin template sobat tidak valid dan menurut saya ganti template lagi kalau niat banget ==v
Oia,sobat perhatikan CSS yang seperti dibawah ini:
bila sobat perhatikan,ada css .cb-slideshow li:nth-child 1 sampai 6,yang artinya kamu bisa pasang 6 background yang berbeda.yang sobat,lakukan selanjutnya ganti URL gambar yang sudah ada,dengan URL gambar kamu.
tapi itu juga tergantung dari size gambar yang dijadikan background,saya sarankan sebelum mengupload dan memasang background,cari gambar yang ukuran filenya kecil(100-200kb),dan bila perlu,edit dulu gambarnya di photoshop menjadi kecil.contohnya blog saya sekarang,mungkin masih agak berat saat pertama kali buka blog saya,tapi kalau cache sudah tersimpan di browser kamu,maka otomatis tidak akan terlalu berat lagi saat membuka blog saya.sebelum mencoba trik ini,saya ingatkan untuk membackup terlebih dahulu template blogger kamu.
ok,yang pertama buka rancangan=> edit HTML,lalu copy kode html dibawah ini di bawah kode <body>
<ul class="cb-slideshow">
< li><span>Gambar 01</span><div><h3>textkamu1</h3></div></li>
< li><span>Gambar 02</span><div><h3>textkamu2</h3></div></li>
< li><span>Gambar 03</span><div><h3>textkamu3</h3></div></li>
< li><span>Gambar 04</span><div><h3>textkamu4</h3></div></li>
< li><span>Gambar 05</span><div><h3>textkamu5</h3></div></li>
< li><span>Gambar 06</span><div><h3>textkamu6</h3></div></li>
< /ul>
#Note:kamu bisa mengganti pesannya pada tiap slide.
yang kedua,pilih/COPY SALAH SATU Style/CSS yang ada dibawah ini,Sesuai yang ada dicontoh.
Slide effect 1
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-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;
}
.cb-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;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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 .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
Slide effect 2
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-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;
}
.cb-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;
}
.cb-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);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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 }
}
@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 .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Slide effect 3
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
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;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
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;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(255,255,255,0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-o-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
8% {
opacity: 1;
-webkit-transform: translateY(0%);
}
17% {
opacity: 1;
-webkit-transform: translateY(0%);
}
19% {
opacity: 0;
-webkit-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(-300%);
}
8% {
opacity: 1;
-moz-transform: translateY(0%);
}
17% {
opacity: 1;
-moz-transform: translateY(0%);
}
19% {
opacity: 0;
-moz-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(-300%);
}
8% {
opacity: 1;
-o-transform: translateY(0%);
}
17% {
opacity: 1;
-o-transform: translateY(0%);
}
19% {
opacity: 0;
-o-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(-300%);
}
8% {
opacity: 1;
-ms-transform: translateY(0%);
}
17% {
opacity: 1;
-ms-transform: translateY(0%);
}
19% {
opacity: 0;
-ms-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
17% {
opacity: 1;
transform: translateY(0%);
}
19% {
opacity: 0;
transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Slide effect 4
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-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;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
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;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
8% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
8% {
opacity: 1;
-moz-transform: translateY(0px);
}
17% {
opacity: 1;
-moz-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
8% {
opacity: 1;
-o-transform: translateY(0px);
}
17% {
opacity: 1;
-o-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
8% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
transform: scale(10);
}
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Kalau sudah dicopy,paste di atas kode ]]></b:skin> ,lalu simpan dan lihat hasilnya.
Saya ingatkan,tidak semua template blogger sobat bisa menggunakan trik ini,jika gagal,maka akan menjadi speri dibawah ini:
Oia,sobat perhatikan CSS yang seperti dibawah ini:
.cb-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
bila sobat perhatikan,ada css .cb-slideshow li:nth-child 1 sampai 6,yang artinya kamu bisa pasang 6 background yang berbeda.yang sobat,lakukan selanjutnya ganti URL gambar yang sudah ada,dengan URL gambar kamu.
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
(づ￣ ³￣)づ
Untuk CSS,saya tidak jelaskan secara rinci,karena untuk pengeditan css,merubah tipe font,warna dan efek animasi,akan lebih panjang ceritanya,tapi saya yakin sobat pasti sudah jago ngedit css.tapi kalau ada masalah atau galat(misal navbar ketutup gambar,ada widget yg ketutup gambar,dan mungkin juga ada element lain sehingga background tidak muncul karena tertutup oleh posting,sidebar,header),kalau masalahnya seperti itu,menurut saya element" kamu dibuat trasparant,atau cari blogger template yang luas posting'a tidak terlalu besar.
nah bila masalahnya semua halaman blog kamu ketutup ama slide ini,klo masalah yg kaya gitu udah gw duga.sbenarnya cuma tambahin css z-index:-99; ke css slide'a itu,jadi nanti posisinya ada di paling blakang.karena slide ini maen'a juga pakai sistem layer.
Contohnya kamu bisa liat blog saya,atau disini:
dan ini contoh yang saya gunakan pada template blog experiment : http://akatsukimangaindo.blogspot.com/
ok,yang pertama buka rancangan=> edit HTML,lalu copy kode html dibawah ini di bawah kode <body>
yang kedua,pilih/COPY SALAH SATU Style/CSS yang ada dibawah ini,Sesuai yang ada dicontoh.
Kalau sudah dicopy,paste di atas kode ]]></b:skin> ,lalu simpan dan lihat hasilnya.
Saya ingatkan,tidak semua template blogger sobat bisa menggunakan trik ini,jika gagal,maka akan menjadi speri dibawah ini:
saran saya,cek lagi template blogger sobat,mungkin template sobat tidak valid dan menurut saya ganti template lagi kalau niat banget ==v
Oia,sobat perhatikan CSS yang seperti dibawah ini:
bila sobat perhatikan,ada css .cb-slideshow li:nth-child 1 sampai 6,yang artinya kamu bisa pasang 6 background yang berbeda.yang sobat,lakukan selanjutnya ganti URL gambar yang sudah ada,dengan URL gambar kamu.
Terima kasih,dan selamat mencoba :)
Referensi : Blog Johanes
nah bila masalahnya semua halaman blog kamu ketutup ama slide ini,klo masalah yg kaya gitu udah gw duga.sbenarnya cuma tambahin css z-index:-99; ke css slide'a itu,jadi nanti posisinya ada di paling blakang.karena slide ini maen'a juga pakai sistem layer.
Memasang wallpaper pada background blog kita,terlihat menarik dan unik.tapi menggunakan trik ini juga akan membuat blog sobat agak berat karena lamanya proses loading gambar yang akan ditampilkan.
tapi itu juga tergantung dari size gambar yang dijadikan background,saya sarankan sebelum mengupload dan memasang background,cari gambar yang ukuran filenya kecil(100-200kb),dan bila perlu,edit dulu gambarnya di photoshop menjadi kecil.contohnya blog saya sekarang,mungkin masih agak berat saat pertama kali buka blog saya,tapi kalau cache sudah tersimpan di browser kamu,maka otomatis tidak akan terlalu berat lagi saat membuka blog saya.sebelum mencoba trik ini,saya ingatkan untuk membackup terlebih dahulu template blogger kamu.
Contohnya kamu bisa liat blog saya,atau disini:
dan ini contoh yang saya gunakan pada template blog experiment : http://akatsukimangaindo.blogspot.com/
ok,yang pertama buka rancangan=> edit HTML,lalu copy kode html dibawah ini di bawah kode <body>
<ul class="cb-slideshow">
< li><span>Gambar 01</span><div><h3>textkamu1</h3></div></li>
< li><span>Gambar 02</span><div><h3>textkamu2</h3></div></li>
< li><span>Gambar 03</span><div><h3>textkamu3</h3></div></li>
< li><span>Gambar 04</span><div><h3>textkamu4</h3></div></li>
< li><span>Gambar 05</span><div><h3>textkamu5</h3></div></li>
< li><span>Gambar 06</span><div><h3>textkamu6</h3></div></li>
< /ul>
#Note:kamu bisa mengganti pesannya pada tiap slide.
yang kedua,pilih/COPY SALAH SATU Style/CSS yang ada dibawah ini,Sesuai yang ada dicontoh.
Slide effect 1
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-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;
}
.cb-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;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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 .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}
Slide effect 2
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-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;
}
.cb-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;
}
.cb-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);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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 }
}
@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 .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Slide effect 3
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
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;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
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;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(255,255,255,0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-o-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) translateY(-100%);
}
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);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
8% {
opacity: 1;
-webkit-transform: translateY(0%);
}
17% {
opacity: 1;
-webkit-transform: translateY(0%);
}
19% {
opacity: 0;
-webkit-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(-300%);
}
8% {
opacity: 1;
-moz-transform: translateY(0%);
}
17% {
opacity: 1;
-moz-transform: translateY(0%);
}
19% {
opacity: 0;
-moz-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(-300%);
}
8% {
opacity: 1;
-o-transform: translateY(0%);
}
17% {
opacity: 1;
-o-transform: translateY(0%);
}
19% {
opacity: 0;
-o-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(-300%);
}
8% {
opacity: 1;
-ms-transform: translateY(0%);
}
17% {
opacity: 1;
-ms-transform: translateY(0%);
}
19% {
opacity: 0;
-ms-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
17% {
opacity: 1;
transform: translateY(0%);
}
19% {
opacity: 0;
transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Slide effect 4
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-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;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
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;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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;
}
.cb-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-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
8% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
8% {
opacity: 1;
-moz-transform: translateY(0px);
}
17% {
opacity: 1;
-moz-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
8% {
opacity: 1;
-o-transform: translateY(0px);
}
17% {
opacity: 1;
-o-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
8% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
transform: scale(10);
}
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}
Kalau sudah dicopy,paste di atas kode ]]></b:skin> ,lalu simpan dan lihat hasilnya.
Saya ingatkan,tidak semua template blogger sobat bisa menggunakan trik ini,jika gagal,maka akan menjadi speri dibawah ini:
Oia,sobat perhatikan CSS yang seperti dibawah ini:
.cb-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
bila sobat perhatikan,ada css .cb-slideshow li:nth-child 1 sampai 6,yang artinya kamu bisa pasang 6 background yang berbeda.yang sobat,lakukan selanjutnya ganti URL gambar yang sudah ada,dengan URL gambar kamu.
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqzZpAX8QDWbtNsH2cjUrl2NYI6Ah7TIMwEGRvHzK0JiUkIgIWFaNvrmvnSuKRDU5vz5bUOFrW2uC2kcBzqV9cJ9FLpqMZeM3sW_t5TMFh9J57khBGG-0Llbz_pI5qALNoxPg0gLxKWs/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
(づ￣ ³￣)づ
Untuk CSS,saya tidak jelaskan secara rinci,karena untuk pengeditan css,merubah tipe font,warna dan efek animasi,akan lebih panjang ceritanya,tapi saya yakin sobat pasti sudah jago ngedit css.tapi kalau ada masalah atau galat(misal navbar ketutup gambar,ada widget yg ketutup gambar,dan mungkin juga ada element lain sehingga background tidak muncul karena tertutup oleh posting,sidebar,header),kalau masalahnya seperti itu,menurut saya element" kamu dibuat trasparant,atau cari blogger template yang luas posting'a tidak terlalu besar.
nah bila masalahnya semua halaman blog kamu ketutup ama slide ini,klo masalah yg kaya gitu udah gw duga.sbenarnya cuma tambahin css z-index:-99; ke css slide'a itu,jadi nanti posisinya ada di paling blakang.karena slide ini maen'a juga pakai sistem layer.
Ibaratnya kaya photoshop,kalo layer'a diposisi paling atas,yg diblakangnya akan ketutup sama yang diatas,kalau di blog,slidenya itu bisa menimpa sidebar ataupun yg lain,jadi kita cuma harus posisiin slidenya itu dipaling belakang aja.
jika ada masalah tinggal tanyakan saja~xDD
nah bila masalahnya semua halaman blog kamu ketutup ama slide ini,klo masalah yg kaya gitu udah gw duga.sbenarnya cuma tambahin css z-index:-99; ke css slide'a itu,jadi nanti posisinya ada di paling blakang.karena slide ini maen'a juga pakai sistem layer.
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0; <===,diganti jadi z-index: -99; (atau lebih minus juga boleh ==v }
Ibaratnya kaya photoshop,kalo layer'a diposisi paling atas,yg diblakangnya akan ketutup sama yang diatas,kalau di blog,slidenya itu bisa menimpa sidebar ataupun yg lain,jadi kita cuma harus posisiin slidenya itu dipaling belakang aja.
jika ada masalah tinggal tanyakan saja~xDD
Terima kasih,dan selamat mencoba :)
Referensi : Blog Johanes
0 komentar:
Posting Komentar