Pure CSS3 Image Slider Widget for Blogspot (Cycle Style)

Here I came up with a stylish and hot image slider for blogger that is just using pure CSS3. No Javascript or jQuery is used. So this slider is more easy to customize for newbies, just need a basic HTML and little good CSS3 knowledge. No server side coding is used here, so all is on your hand. This cycle style slider is created by smashingmagazine. Take a look on their page for more about it.

I created a bogarized version from theirs, it is now just need to follow few easy steps to installing this slider on blogspot blog.

• DEMO

Lets follow the simple 4 steps to add this "CSS3 image slider to Blogger blog"

1. Go to Blogger Dashboard > Layout >  
2. Add a HTML/Javascript Gadget
3. Copy the code below and paste on it.

<style type="text/css" media="screen">.container { margin: 0 auto; overflow: hidden; width: 700px;} #content-slider { height: 335px; width: 100%;} #slider { background: none repeat scroll 0 0 #000000; border: 5px solid #FFFFFF; -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); height: 320px; margin: 10px auto; overflow: visible; position: relative; width: 680px;} #mask { height: 320px; overflow: hidden;} #slider ul { margin: 0; padding: 0; position: relative;} #slider li { width: 680px; height: 320px; position: absolute; top: -325px; list-style: none;} #slider li.firstanimation { -moz-animation: cycle 25s linear infinite; -webkit-animation: cycle 25s linear infinite;} #slider li.secondanimation { -moz-animation: cycletwo 25s linear infinite; -webkit-animation: cycletwo 25s linear infinite;} #slider li.thirdanimation { -moz-animation: cyclethree 25s linear infinite; -webkit-animation: cyclethree 25s linear infinite;} #slider li.fourthanimation { -moz-animation: cyclefour 25s linear infinite; -webkit-animation: cyclefour 25s linear infinite;} #slider li.fifthanimation { -moz-animation: cyclefive 25s linear infinite; -webkit-animation: cyclefive 25s linear infinite;} #slider .tooltip { background: rgba(0, 0, 0, 0.7); width: 300px; height: 60px; position: relative; bottom: 75px; left: -320px; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #slider .tooltip h1 { color: #fff; font-size: 24px; font-weight: 300; line-height: 60px; padding: 0 0 0 20px;} #slider li#first:hover .tooltip,#slider li#second:hover .tooltip,#slider li#third:hover .tooltip,#slider li#fourth:hover .tooltip,#slider li#fifth:hover .tooltip { left: 0px;} /* PROGRESS BAR */ .progress-bar { position: relative; top: -5px; width: 680px; height: 5px; background: #000; -moz-animation: fullexpand 25s ease-out infinite; -webkit-animation: fullexpand 25s ease-out infinite;} /* ANIMATION */ @-moz-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; }} @-moz-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }} @-moz-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }} @-moz-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }} @-moz-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; }} @-webkit-keyframes cycle { 0% { top: 0px; } 4% { top: 0px; } 16% { top: 0px; opacity: 1; z-index: 0; } 20% { top: 325px; opacity: 0; z-index: 0; } 21% { top: -325px; opacity: 0; z-index: -1; } 50% { top: -325px; opacity: 0; z-index: -1; } 92% { top: -325px; opacity: 0; z-index: 0; } 96% { top: -325px; opacity: 0; } 100% { top: 0px; opacity: 1; }} @-webkit-keyframes cycletwo { 0% { top: -325px; opacity: 0; } 16% { top: -325px; opacity: 0; } 20% { top: 0px; opacity: 1; } 24% { top: 0px; opacity: 1; } 36% { top: 0px; opacity: 1; z-index: 0; } 40% { top: 325px; opacity: 0; z-index: 0; } 41% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }} @-webkit-keyframes cyclethree { 0% { top: -325px; opacity: 0; } 36% { top: -325px; opacity: 0; } 40% { top: 0px; opacity: 1; } 44% { top: 0px; opacity: 1; } 56% { top: 0px; opacity: 1; z-index: 0; } 60% { top: 325px; opacity: 0; z-index: 0; } 61% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }} @-webkit-keyframes cyclefour { 0% { top: -325px; opacity: 0; } 56% { top: -325px; opacity: 0; } 60% { top: 0px; opacity: 1; } 64% { top: 0px; opacity: 1; } 76% { top: 0px; opacity: 1; z-index: 0; } 80% { top: 325px; opacity: 0; z-index: 0; } 81% { top: -325px; opacity: 0; z-index: -1; } 100% { top: -325px; opacity: 0; z-index: -1; }} @-webkit-keyframes cyclefive { 0% { top: -325px; opacity: 0; } 76% { top: -325px; opacity: 0; } 80% { top: 0px; opacity: 1; } 84% { top: 0px; opacity: 1; } 96% { top: 0px; opacity: 1; z-index: 0; } 100% { top: 325px; opacity: 0; z-index: 0; }} /* ANIMATION BAR */ @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }} @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; } 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; } 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; } 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; } 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }}</style><div class="container"> <div id="content-slider"> <div id="slider"> <div id="mask"> <ul> <li id="first" class="firstanimation"> <a href="http://dimpost.com"> <img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar" /> </a> <div class="tooltip"> <h1>Cougar</h1> </div> </li> <li id="second" class="secondanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions" /> </a> <div class="tooltip"> <h1>Lions</h1> </div> </li> <li id="third" class="thirdanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker" /> </a> <div class="tooltip"> <h1>Snowalker</h1> </div> </li> <li id="fourth" class="fourthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling" /> </a> <div class="tooltip"> <h1>Howling</h1> </div> </li> <li id="fifth" class="fifthanimation"> <a href="#"> <img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing" /> </a> <div class="tooltip"> <h1>Sunbathing</h1> </div> </li> </ul> </div> <div class="progress-bar"></div> </div> </div></div>

 4. Change link and images with yours.