How To Add Css3 Fade Slide Show For Blogger

How To Add Css3 Fade Slide Show For Blogger 

In this post, im gonna explain, how to  add  nice
fade slider with using Css3 and HTML.Actually
Slideshow make  your blog  attractive,  you can
add some blog related image for  slideshow. Its
included moving title too.So it will make  your
blog attractive.Try to add to your blog. its easy.
Get my earlier slideshow post here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* fade slider www.bloggertrix.com*/
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.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 www.bloggertrix.com*/
    -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;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div class="slides">
            <ul> <!-- slides -->
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw4ggij5n_GQynq7iGOxiKX-jeBR8cA2Zi9EY0jeuzrCdZQgOLXL4AFasskFaMF3fck8gQQZFIUo0-H_-fElTha8-jcFKHtwRptvM07L1ocDJ7weXyHsbugSbrT9qkpy3nUi7RrrZpy2g/s1600/bloggertrix-pic1.jpg" alt="image01" />
                    <div>Title 1</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWTzspv6v_tHhY-_sn2T3uDE6fMPMm2EfrIb-Td2BTyvXKvohLklGac6ToPevDyzxxcPnjWDfZAice0Rb_qXFMNQuPoUCETw8Xwunjq3Af2Ixpb_Ep7MF4dS3i1X0jdmbmI0ugE-QQkx8/s1600/bloggertrix-pic2.jpg" alt="image02" />
                    <div>Title 2</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAnf0HJmi9EZ8gsh8hFp4096oD4nxjw872LMKZl75kqRjrR9CpPOSG4a0Y6mouJiLcAXZqNXDi7B6lNzQVvcMpexyStMzj2B-ovm7ADq4Kl4b0eGYwPx4wrP_nrGyhZtdt2faQ122I4tg/s1600/bloggertrix-pic3.jpg" alt="image03" />
                    <div>Title 3</div>
                </li>
                <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qwl4OxwMKKLNex-kHDt2I9Lbbns-LA4sNH5-vxOERyoZiopqyLBc_5ntvJe4jTWxGPyt8DYdhD5l-dpKIlxpLNCoxLm2Fk_0-2rxGPn-FXaAgD3r9_KNRdkfTZ3H7PEJ847BTz-7h5o/s1600/bloggertrix-pic4.jpg" alt="image04" />
                    <div>Title 4</div>
                </li>
            </ul>
        </div>

Replace Title and image links.
10. Now save your HTML/Javascript'.

    You are done...