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.

Live Demo

You would see that this slider has a nice sliding effect, after loading an image it slider title will arrive with flying effect. The utility will make your blog interesting, you can add featured post's pictures and links to the particular post. Remember this slider image size would be 600 X 300 px for best result.  This utility helps accelerate blog because it fully uses CSS3. installing this slider is very easy.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

<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/AVvXsEhpbmIoOmQlvha63CdLs-wbsSExh7Rmh1r0b6luUTI9jCytMkn2lM-rRrWqV8eHSej8pHgnF68F6743IE9eOVp6b9PnGJ-entKyU4Ro9_X5URUIpci1bDwyvdH4_J57QDPplaj6JSZr_w4N/s1600/1.png" /></a>
<div>Title 1</div>
        </li>
<li>
         <a href="#" title="Image 2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieTbPr3u4H8mYuuLwoTf2HjVgbo8-troL9OG0PQAoqn6unBM7OXyYGFtqPTvTundyBwnclMix1g4eOST4mlamhcp0lwPd65EjuQiTUnk_VdVVR0l_dq0tr4bQDDv9s_KpSSknqb_xF-4-S/s1600/4.png" /></a>
<div>Title 2</div>
        </li>
<li>
         <a href="#" title="Image 3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1avZnYr4cSL-qSedVofByPKp69Oy2mGsQ_jbnnRF8C39LEifcRlBL61eRvaTB2ejUbJbDgtgP4xO8qwtAnAh1FVRGWXkyk9MIqcE5SoduxnRlQdDfrOPC1Qh51gqVQXaflUW8CYaPteCm/s1600/2.png" /></a>
<div>Title 3</div>
        </li>
<li>
         <a href="#" title="Image 4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqnHxbaDscrVt85GKRzWEkjPu6QgVtD-NG_Yc90IFR70m2lBxuS_ZXX1Ouf7z_2BS69__FeLBe7lad5GYJDscYNTGbmKvi9ra0El-5PSEbubuxGZ1iB_G6cPjDOvXnjzLzXP68JtajhuQZ/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/AVvXsEhpbmIoOmQlvha63CdLs-wbsSExh7Rmh1r0b6luUTI9jCytMkn2lM-rRrWqV8eHSej8pHgnF68F6743IE9eOVp6b9PnGJ-entKyU4Ro9_X5URUIpci1bDwyvdH4_J57QDPplaj6JSZr_w4N/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. 

If you face any problem just leave a comment below I will help you to fix it.