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(http://4.bp.blogspot.com/-McXB4t7-Yic/T-SJM7gabwI/AAAAAAAACBI/lKDrkN-M-Z8/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(http://1.bp.blogspot.com/-T3HoE0hcDSk/T-SJMBDpS7I/AAAAAAAACBA/gVo5LjEEOrY/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(http://4.bp.blogspot.com/-yKmATamNi5A/T-SJK85LUvI/AAAAAAAACA4/ZfhUPC0hYM0/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(http://2.bp.blogspot.com/-H3qemmsLsak/T-SJN16OKeI/AAAAAAAACBQ/cmXQQxIccVk/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="http://2.bp.blogspot.com/-DX76JjnhxSU/T-SKKTpfngI/AAAAAAAACBc/QFZHfs5Ennw/s1600/helperblogger.com-1.png" /></a><span><h2>ADD CAPTION HERE</h2></span>
        </li>
        <li>
         <a href="#" title="ADD YOUR TITLE HERE"><img src="http://4.bp.blogspot.com/-0u9BoJX6wj8/T-SK6zLuh4I/AAAAAAAACB0/pz-fWY1Y2xQ/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="http://1.bp.blogspot.com/-ohkIGz2VT7Q/T-SKOV6BBMI/AAAAAAAACBs/MTRsSvPEgmk/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

Post a Comment

  1. Hi rahul, i added the same code for testing. but not getting bold in syntax highlighter. but you got bold in lines of 95, 96, 97, 98 etc........

    ReplyDelete
    Replies
    1. Hey I have not bolded them also they are not in bold.Your code will automatically highlighted as it is depend upon which brush you are for which code.

      Delete
  2. Hi Rahul,
    I'm here again. How do I change the pictures. How do I upload pictures to the web???
    Help me!
    Thanks,
    tabak

    ReplyDelete
    Replies
    1. To change pictures find the similar lines in above code,

      http://1.bp.blogspot.com/-ohkIGz2VT7Q/T-SKOV6BBMI/AAAAAAAACBs/MTRsSvPEgmk/s1600/helperblogger.com-3.png

      and replace them with your own pictures also upload your own images to blogger when upload done click on Edit HTML tab of your post editor and copy the link which will be similar to above one.

      Also I will post a tutorial about uploading pictures to blogger :)

      Delete
  3. It will be fine, because I'don't understand it! :-(

    ReplyDelete
  4. It's wooooorking!!!

    http://4.bp.blogspot.com/-Q1mxErg0JYs/T_Ma4ROByzI/AAAAAAAAAbo/r0B2Qbyf5_Y/s150/7362.jpg

    Thanks,
    tabak

    ReplyDelete
  5. Hi! I have a few questions? a) How can we include all the images from our blog, picasa album or blog posts in this gallery along with their title, captions, tags, etc. rather than having to add images, links, title one by one? b) Is there a way whereby, this gallery can automatically update new images as soon as a new post with images are posted and at the same time displaying title of the post, image caption, tags, labels, etc? c) Can we add this code in our template instead of adding it in a html/java script gadget, if so where should one place this code to add straight away in our template?

    ReplyDelete
  6. Hi, this works perfectly thanks. However I'd like to add 5 slides to the slider instead of 4. When I add an extra slide, things get weird. Do you know how to fix this?

    ReplyDelete
  7. I have the same issue as bulletproofsponge - I am trying to add more images and things do indeed get weird. Nicely put. Can you please explain what needs to be changes if you want to add more images? Many thanks.

    ReplyDelete
  8. I've read the commented version of the code now, which is really helpful. Has anyone out there converted the code yet to do 8 slides or more? Share it if you have, just a link to your site, so we can see how you changed the code :)

    ReplyDelete
  9. hey thanks for this.. can you tell me how to increase width or height of the slide

    ReplyDelete
  10. I want to add more sliders too can you please help and can you reply me at aaliya_hayyat@yahoo.com

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. I appreciate the effort of the blogger. I have one small question which is related to html5. If you could help me out then it would be really helpful. How is the page structure in html5 is different from html4?
    html5 training in chennai|html5 course in chennai

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top