Langsung ke konten utama

Trik membuat Fullscreen background slideshow dengan CSS3

Trik membuat Fullscreen background slideshow dengan CSS3

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:
Trik membuat Fullscreen background slideshow dengan CSS3

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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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:
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:
.cb-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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/AVvXsEgxi9DuRweGq7g5o2qk1VFwrN_E2aJDcaZJ0c8lGw5wGKSxRGvfw03YYXBZNnT5lfSsz1smspcweTIHlGyE1yOLAzBRYw-zN0iNu_1zr5emsBJEAdj2RfDc16kkYZJQV_CuWkVIgaukzJM/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.
.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 :)


Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Karya Seni Patung Gregorius Sidharta

Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta G Sidharta Tokoh Seniman Patung Indonesia G Sidharta The Concept Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia Pengawal Batas Indonesian Visual Art Archive Karya Karya G Sidharta Homage Artdig Gregorius Sidharta Soegijo Homegallery Posts Facebook Indonesian Visual Art Archive Karya Karya G Sidharta Gregorius Sidharta Ilmuseni Com Homage G Sidharta Soegijo Dalam Seni Rupa Indonesia 11 12 09 Gregorius Sidharta Soegijo Homegallery Posts Facebook Karya Seni Pembentuk Identitas Negara Indonesian Visual Art Archive Karya Karya G Sidharta Sejarah Awal Dan Perkembangan Seni Patung Di Indonesia Lukisan Berma...
Posting Komentar
Baca selengkapnya

Seni Lukis Impresionisme

Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Apa Itu Impresionisme Sejarah Seni Lukis Impresionisme Dunia Lukisan Javadesindo Art Gallery Sejarah Aliran Seni Apa Yang Dimaksud Dengan Aliran Impresionisme Seni Rupa Seni Rupa Impresionisme Dan Ciri Ciri Lukisannya Bilik Seni Impresionisme Pengertian Ciri Tokoh Contoh Karya Analisis Aliran Seni Lukis Impresionisme Thegorbalsla Siapa Saja Tokoh Seni Lukis Aliran Impresionisme Seni Rupa Impresionis Aliran Yang Awalnya Tertolak Kompasiana Com Impresionisme Definition And Synonyms Of Impresionisme In The Media Pembelajaran Lukisan Impresionisme Impressionism Mengapresiasi Lukisan Impresionisme Karya Leonid Afrem...
Posting Komentar
Baca selengkapnya

Seni Lukis Patung

Cabang Cabang Seni Rupa Seni Patung Sening Lukis Seni Grafis Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Seni Rupa Murni Nusantara Dan Mancanegara Art Lesson In Smp Seni Patung Beserta Pengertian Fungsi Teknik Contohnya Seni Budaya Sejarah Perkembangan Seni Rupa Lukisan Patung Liberty Berjilbab Tuai Kontroversi Dream Co Id Apa Itu Seni Patung Tambah Wawasanmu Tentang Dunia Seni Di Sini Di Balik Senyap Tampilkan Karya Seni Patung Dan Lukisan Bagaimana Sejarah Seni Rupa Yunani Kuno Seni Rupa Dictio Pengertian Dan Contoh Seni Rupa Murni Genggam Internet Dk Blog Contoh Karya Seni Lukis Patung Beserta Apresiasinya Pameran Seni Lukis Fotografi Dan Patung Hadir Selama Sepekan Di Gambar Wanita Monumen Patung Kesedi...
Posting Komentar
Baca selengkapnya