I think that i have to post 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.
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.
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.