Pure CSS3 Image Slider For Blogger

CSS3 is a only thing which does not affect loading speed your blog.Today I have watched an amazing slider which totally works pure CSS3 i.e. no jQuery or no any heavy JavaScript is used.As it is made with pure CSS3 there are some things which make it little lower class than any other jQuery sliders such as we don't have control to see next/previous images also only one effect.But never forgot that it is made with pure CSS3 this is the biggest advantage of this slider.Below are some great features of this slider,

1. It is made with pure CSS3.
2. Fully customizable as it is made with CSS3.
3. Stops on mouse hover
4. Iframe allowed
5. You can add caption and many other....

Now lets see how to add it to blogger blog,First see the demo of the slider.

Live Slider Demo

How To Add Pure CSS3 Slider To Blogger?

As always I have tried to make this tutorial with one installation and I succeed,you only need to copy and paste the code :) Follow below instruction to add this slider to your blogger blog...

1. First go to Blogger Dashboard > Layout
2. Click on Add a Gadget (Below Header)
3. Select HTML/JavaScript
4. And paste below code inside it,

<style> 
#slider {
    width: 600px;
    height: 200px;
    margin: 40px auto 0;
    overflow: visible;
    background-color: #362c30;
    border: 10px solid #362c30;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    position: relative;
}

#mask {
    overflow: hidden;
}

#slider:hover {
    background-color: #fff;
    border: 10px solid #ddd;
}

#slider:hover #pause {
    opacity: 1;
}

#slider:hover #progress {
    background-color: rgba(255,255,255,0.0);
}

#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
    -moz-animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

#pause {
    width: 600px;
    height: 200px;
    position: absolute;
    top: 0;
    opacity: 0;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg02NJd_ssJhTVUW8nxGE0MvGatSindmvnkFKcJ8pgU9z_qhRxtwLz9b8tlbhrVI6eeenNEKfjRTXRHxx4XJQUDPC_ya3cvQsJEgfg7nxKeDkbvPLBYvyH2EhklrpSTXTmc1P59kdXaSgY/s1600/helperblogger.com-paused.png);
    background-position: 566px 10px;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
}

#progress {
    width: 1px;
    height: 1px;
    background-color: #ffd000;
    -moz-animation: progress 18s infinite;
    -webkit-animation: progress 18s infinite;
    position: relative;
    top: -1px;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
}

#overlay {
    width: 600px;
    height: 200px;
    position: absolute;
    top: 0;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYIk4ueASxzWp_HZyw7QPkaoWYMuNvI_m_ITXR5CzbbDIcvpU84RCeJ5gtKe4Facztr_YdIL19K5CxKBR2trAEENY8nxV-1wxisPV4tzk9rIn3DVQJRPJDAkFPZHGt-qFDzZx9HJqf70/s1600/helperblogger.com-overlay.png);
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    -moz-transition: all 150ms ease-in;
    -webkit-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    opacity: 0.5;
    -moz-animation: overlay-fade 18s infinite;
    -webkit-animation: overlay-fade 18s infinite;
}

#slider ul {
    width: 2400px;
    list-style: none;
    padding: 0;
    margin: 0;
    -moz-animation: slide-animation 18s infinite;
    -webkit-animation: slide-animation 18s infinite;
    position: relative;
    left: 0px;
}

#slider li {
    display: inline;
    width: 600px;
    height: 200px;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfMSbyNpR7aEKrIUopic80AcNbm2dbOqKXN2u20s4l7r8k6KJdkTUIi6txz5_xPUUeGMs3C9qvZtd28MnofIsSFRx1rLlVeByK_sYnarZBWb7tOVJVUeFbTVOePZQ7oS5qI3LWAJr7L8/s1600/helperblogger.com-loader.gif);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#slider li:last-of-type {
    background-color: #362c30;
}

#slider li a {
    display: block;
    text-decoration: none;
}

#slider li span {
    display: block;
    width: 560px;
    padding: 15px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(54,44,48,0.6);
    border-top: 1px solid #362c30;
    text-shadow: 1px 1px 1px #362c30;
    pointer-events: none;
    text-align: left;
}

#slider-shadow {
    width: 100%;
    height: 260px;
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjexX8ImG2e-UTnRIBRfoeFBWnLt1GKljloPQkS3YoIQDyrzYvE3v6DVwkrJCJLsWa2e3Y9eipPEae9ZN7A7zhYAtRXU3a7lT75HVpfRwdgjmZJDfusEZbIxWcj8X-eeIfbTidxtPNZSDA/s1600/helperblogger.com-slider-shadow.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    margin: 10px auto 0;
}

@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}

#slider ul li span h2 {
    font-size: 24px;
    line-height: 24px;
    color: #fff;
    font-weight: normal;
    font-family: 'Communist-Regular';
    text-shadow: 1px 1px 1px #362c30;
}
 </style>


<div id="slider-shadow">
     <div id="slider">
      <div id="mask">
       <ul>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6MzeJe-iJoa5MSECuo4miN7LyP4QPqc28lFqvZ9AHJlCaIjUQ1iHM4CqF6r7yUUMPypXZp86O_pAoxgUzJ1hjHV80E2X0BaoLFbKbDZA7cw4uBTgMIdUHU0P5ccN9ldjnpPlo6HQGNmw/s1600/helperblogger.com-1.png" /></a><span><h2>ADD CAPTION HERE</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6AaUesxXoFnj0S_1ss8yeqAC34ExrzO0b6qW21iSiTuk2cQbCt6KFOjgtmukX0TZiX0U0qu4vWWpvuDNeUBp6qHhOLHCxf_WGvccLf4aFjcXb-vUWaOcScr8X6mOMbILbT5dQjfJtLw/s1600/helperblogger.com-4.png" /></a>
         <span><h2>ADD CAPTION HERE</h2></span>
        </li>
        <li>
         <iframe src="http://www.helperblogger.com/" width="600" height="200" frameborder="0" scrolling="no"></iframe>
         <span><h2>Helper Blogger</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYdLaJ8uBJjy8l6TLcSlkyCO8hYEbkcA4NXIRk7iDED2ODOcdXd3xiomQClcdRZleWdmYFxyIJnWMzb21gqD_DmCqs96WIpDWt1hfRJlZCAkdPhazjotpyykpAr_MY9PhViS5GUHekI6I/s1600/helperblogger.com-3.png" /></a>
        </li>
       </ul>
      </div>
      <div id="progress">
      </div>
      <div id="overlay">
      </div>
      <div id="pause">
      </div>
     </div>
    </div>

• If you want to change slider's width and width and height then simply edit the code in line number 3 and 4. (Your height and width of slider must be similar to height and width of all images)
• Code highlighted in line number 239 indicates that how to add image with caption in slider?
• Code highlighted in line number 246 and 247 indicates that how to add an iframe in slider.
• Now if you want to customize this slider which suits to your blog,then simply copy all of above code,paste it into HTML Editor and hit Preview button

I hope you have liked this slider.Your comments are always welcomed :)

pEaCe aNd BlEsSiNgS BuDdIes.... :D