Add CSS Fadeout Slider into your Blog

Add CSS Fadeout Slider into your Blog

0
data:blog.title
Image Slider

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="http://2.bp.blogspot.com/-4lglXybmunw/UdMDFuQmyvI/AAAAAAAAAHY/fXc3hLXVpz4/s1600/1.png" /></a>
<div>Title 1</div>
        </li>
<li>
         <a href="#" title="Image 2"><img src="http://1.bp.blogspot.com/-HIRsAqKidWU/UdMD_0KY1UI/AAAAAAAAAHk/I7ivWlc6ua4/s1600/4.png" /></a>
<div>Title 2</div>
        </li>
<li>
         <a href="#" title="Image 3"><img src="http://4.bp.blogspot.com/-NzxlmD9NGPE/UdMEnuTkfRI/AAAAAAAAAHs/uAZn4yniNPk/s1600/2.png" /></a>
<div>Title 3</div>
        </li>
<li>
         <a href="#" title="Image 4"><img src="http://4.bp.blogspot.com/-VRA7DOFxQa0/UeD5cTDCujI/AAAAAAAAD5k/EZPVs5doRSc/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 http://2.bp.blogspot.com/-4lglXybmunw/UdMDFuQmyvI/AAAAAAAAAHY/fXc3hLXVpz4/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. 
Add CSS Fadeout Slider into your Blog
4 Stars stars - "Add CSS Fadeout Slider into your Blog" Slider is very important to display featured post as well as it will make your blog attractive...
Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *