Add CSS3 Fade Slider To Blogger Blog

In this tutorial I would like to show you how to create beautiful CSS3 fade slider for your blogger blog. After adding this widget on your blog you'll see fade effect in between slides. Additional point, you can also add custom text for each slide. This is an automatically CSS3 Fade Slider.

If you're using WordPress then try this "Smooth Slider: WordPress Plugin" for your blog. Auto Slider Gallery can make your blog more attractive. It is so easy, try it now !

Live Demo

Recommend For You - JQuery Featured Content Slider For Blogger Blog

How To Add CSS3 Fade Slider

Note: Make Back Up Before Make Any Changes In Your Blogger Template

• Go to Blogger Dashboard > Template > Edit HTML > Proceed
• Press (CTRL+F) & Find Below Code In Blogger Template

]]></b:skin>

• Before/Above This Paste Below Code

/* fade slider */
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:900px;
}
.slides ul {
list-style:none;
position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes anim_slides {
0% {
opacity:0;
}
6% {
opacity:1;
}
24% {
opacity:1;
}
30% {
opacity:0;
}
100% {
opacity:0;
}
}
.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 6.0s;
-moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 12.0s;
-moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 18.0s;
-moz-animation-delay: 18.0s;
}
.slides ul li img {
display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
@-moz-keyframes anim_titles {
0% {
left:100%;
opacity:0;
}
5% {
left:10%;
opacity:1;
}
20% {
left:10%;
opacity:1;
}
25% {
left:100%;
opacity:0;
}
100% {
left:100%;
opacity:0;
}
}
.slides ul li div {
background-color:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
left:10%;
margin:0 auto;
padding:20px;
position:absolute;
top:50%;
width:200px;
/* css3 animation */
-webkit-animation-name: anim_titles;
-webkit-animation-duration: 24.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_titles;
-moz-animation-duration: 24.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
}

• Go to Design > Click On "Add a Gadget" > HTML/JavaScript Widget
• Copy Paste Below Code In To HTML/JavaScript Widget

<div class="slides">
<ul> <!-- slides -->
<li><img src="images1.jpg" alt="image1" />
<div>Your Title #1</div>
</li>
<li><img src="images2.jpg" alt="image2" />
<div>Your Title #2</div>
</li>
<li><img src="images3.jpg" alt="image3" />
<div>Your Title #3</div>
</li>
<li><img src="images4.jpg" alt="image4" />
<div>Your Title #4</div>
</li>
</ul>
</div>

Remember Notes: Replace Title and Image Links With Your Own.

• Save Gadget and It's All Done

If you need any help then leave your comments below. Stay blessed and keep blogging :)

Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.