Add CSS Fadeout Slider into your Blog

Slider is very important to display featured post as well as it will make your blog attractive. Almost 80% premium blog use slider for beautifying the blog. Earlier most of the slider was JavaScript based for this reason we have to host a JavaScript file on hosting server and that makes the browser slower. But now most of the slider build on CSS which is super fast to load as well as added different affect to enhance the slider's work ability. So I am designed a slider and this is my first designed slider with CSS and HTMl coding.

<style>
/* fade slider http://www.bloggerspice.com/ */
.BloggerSpiceSlider {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:600px;
}
.BloggerSpiceSlider ul {
    list-style:none;
    position:relative;
}
/* keyframes #anim_BloggerSpiceSlider*/
@-webkit-keyframes anim_BloggerSpiceSlider {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
@-moz-keyframes anim_BloggerSpiceSlider {
    0% {opacity:0;}
    6% {opacity:1;}
    24% {opacity:1;}
    30% {opacity:0;}
    100% {opacity:0;}
}
.BloggerSpiceSlider ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_BloggerSpiceSlider;
    -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_BloggerSpiceSlider;
    -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 */
.BloggerSpiceSlider ul  li:nth-child(2), .BloggerSpiceSlider ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.BloggerSpiceSlider ul  li:nth-child(3), .BloggerSpiceSlider ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.BloggerSpiceSlider ul  li:nth-child(4), .BloggerSpiceSlider ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.BloggerSpiceSlider 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;
    }
}
.BloggerSpiceSlider ul li div {
    background-color:#1A1A1A;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 20px #04BDFA inset;
    color:#04BDFA;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;
    /* css3 animation www.bloggerspice.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;
}
</style>
<div class="BloggerSpiceSlider">
 <ul> <!-- BloggerSpiceSlider -->
 <li>
         <a href="#" title="Image 1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE_UWr_JfxENv0Bb-vlDVumLM3xQOqSi5dW8t2Fwin3VNTXjrizFRKF0ZQMRRftHs4nV-1nD85H29TNA2Q6Q1dhBFGyaqcYnc3q4xtbl_5rADcCBMN9bvKRqChgHg6stkBHDr6Pi2CecB/s1600/1.png" /></a>
<div>Title 1</div>
        </li>
<li>
         <a href="#" title="Image 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIQso0fserPSzcOmIAXHtffwOA8KAHEcZSvSqWye9eJ9SGvMZ1rWQc9BWvHO26Yfz8HGmmqBZhRg2leGhT2doVLI9tDW0kCNQH6za3NiOIqZdLukXGunE8TCSOXSkd4JMuvNt1ZGUq-Pwn/s1600/4.png" /></a>
<div>Title 2</div>
        </li>
<li>
         <a href="#" title="Image 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCeNs_OlEA2rWnNKQfI7elRmOjr6caJfnUJWkR81oocDop-3Ok6kdiDNc3AZJ4o0X73sYi6DtVbLikJFCQursuevyhUa6Qrkt0ZzwqVRDaSznel61r7E0Qtv-h-TpBMx28Hg8g8Bi_i_yo/s1600/2.png" /></a>
<div>Title 3</div>
        </li>
<li>
         <a href="#" title="Image 4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8XwHXJN2OYOMPZAkmmyztGvc_0z6tRiVpkgMlzANGuSkEWkGFQ4OngVcLgrRFTR7Lg4ToRenIbasZ1KKGfNwGbVeJjKbSvswGBXLZLtrwa_jUDtNW7SQZHDNubaR6gCqwT-3m70zBxgN7/s1600/BloggerSpice.PNG" /></a>
<div>Title 4</div>
        </li>
  </ul>
</div>

Step 5 Place the Gadget above Body. that's it.

Customization

• Change # with your Post URL
• Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE_UWr_JfxENv0Bb-vlDVumLM3xQOqSi5dW8t2Fwin3VNTXjrizFRKF0ZQMRRftHs4nV-1nD85H29TNA2Q6Q1dhBFGyaqcYnc3q4xtbl_5rADcCBMN9bvKRqChgHg6stkBHDr6Pi2CecB/s1600/1.png with your Image URL
• Alter Image 1 with Image alternative text 
• Alter Title 1 with Post Title. 
• Respectively change all other 3.