Hi friends, today I have a very beautiful CSS powered image slider for blogger. If you use HD images in this slider, it looks amazing and very pretty. To see the next picture, you need to click the dots below the images and after clicking the dots, the next image appears with a transition effect which looks really nice. So, let's start the coding.
Follow the instructions below:
- Login to blogger.
- Navigate to Template > Edit HTML > Proceed > Expand Widget Templates.
- Search for the line ]]></b:skin> and just above it, copy and paste the code given below:
/* slider www.pctricksguru.com*/
#slider1 {
width: 640px;
height: 320px;
margin: 50px auto 0;
position: relative;
background: #fff;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}
#slider1:before, #slider1:after {
content: '';
position: absolute;
width: 60%;
height: 20px;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
-webkit-transform: rotate(-4deg) skew(-10deg);
-moz-transform: rotate(-4deg) skew(-10deg);
-o-transform: rotate(-4deg) skew(-10deg);
-ms-transform: rotate(-4deg) skew(-10deg);
transform: rotate(-4deg) skew(-10deg);
left: 10px;
bottom: 13px;
z-index: -1;
}
#slider1:after {
left: auto;
right: 10px;
-webkit-transform: rotate(4deg) skew(10deg);
-moz-transform: rotate(4deg) skew(10deg);
-o-transform: rotate(4deg) skew(10deg);
-ms-transform: rotate(4deg) skew(10deg);
transform: rotate(4deg) skew(10deg);
}
#slider1 ul {
width: 140px;
height: 40px;
padding: 0 0 0 0;
position: absolute;
z-index: 10;
list-style: none;
left: 50%;
margin-left: -70px;
bottom: -60px;
}
#slider1 ul li:first-child {
margin-left: 16px;
}
#slider1 ul li {
float: left;
margin-right: 12px;
margin-top: 14px;
}
#slider1 ul li:last-child {
margin-right: 0;
}
#slider1 ul li a {
width: 12px;
height: 12px;
display: block;
outline: none;
border: none;
position: relative;
z-index: 2;
background: #aaa;
box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-moz-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.6), 0px 1px 1px 0px white;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#slider1 ul li a:hover {
background: #888;
}
#slider1 img {
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#slider1 img:target {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);
}
#slider1 img#five {
opacity: 1;
-webkit-transform: rotateZ(0);
-moz-transform: rotateZ(0);
-ms-transform: rotateZ(0);
-o-transform: rotateZ(0);
transform: rotateZ(0);}
#slider1 img:not(:target), #slider1 img:target ~ img#five {
opacity: 0;
-webkit-transform: rotateZ(-10deg);
-moz-transform: rotateZ(-10deg);
-ms-transform: rotateZ(-10deg);
-o-transform: rotateZ(-10deg);
transform: rotateZ(-10deg);
}
#slider1 ul li a[href="#five"] {
background: #777;
}
#one:target ~ ul li a[href="#one"],
#two:target ~ ul li a[href="#two"],
#three:target ~ ul li a[href="#three"],
#four:target ~ ul li a[href="#four"],
#five:target ~ ul li a[href="#five"] {
background: #777;
}
#two:target ~ ul li a[href="#five"],
#three:target ~ ul li a[href="#five"],
#four:target ~ ul li a[href="#five"],
#one:target ~ ul li a[href="#five"] {
background: #aaa;
}
- Now, save the template.
- Now, go to Layout and Add A New HTML/Javascript Gadget.
- In the content box, copy and paste the following code:
<div id="slider1">
<!-- Sildes -->
<img id="one" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPyuJ0jbZrGQ6TwdN6AV9Srbmzns3wtP9Y5IrUGph0uJFbuMEPj0cs8ZTd-KO9CkHjQ6ZQDk9HUUr1M_89wKCUV0QQeD9HvoMH486dzwm5Ekxj42JrGnDrQ9MTf3X832ASEP1APwVczmg/s1600/pctricksguru_image1.jpg" />
<img id="two" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KZ3t_GX77_r2JPQZvD6NYrx2eGIN1oarxWTAWBS64NJ6RNOj3IMlHN16BAOx_7QKkZQebCpgU-vNTeu9gK6mWpzHNRfKCMT4IdoK_VU9-goJEsh4CV-UDjxudy3ImUkp-9hR73BOpIk/s1600/pctricksguru_image2.jpg" />
<img id="three" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQiAK_D8fLopC3MjtHtKxomU65c7hgrrdeLUVp5qjl57qOAq85itF1A1-O86DVrTJy18tOKTrBjBYjaDW6dROmzASTBnyWDeOHgNodfWfpS_hhDcGhf_UfaeLLJE1zwyMFCMlBjzRrz0/s1600/pctricksguru_image3.jpg" />
<img id="four" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ5vK8KmK65q2UUE6fVRTc9lf_ULp4BLJ3VtufQ9q-893Dymol3gkMF2xZhg0NylhgMz1yAj9dDYUxE-9oLsvktmW42Bd_vwGSkvHnfV2GBDjE7x9NXUTdscDsvgb9dQ45VxJXYdMN7uA/s1600/pctricksguru_image4.jpg" />
<img id="five" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_2-Q5nmb7DceQnGne_PXQHza_lE04U9EIRqkL_z11njiH1Z4PdRP1KZ_VeoYmWzeJg7F0q9SyRvl9GnI1lsR1eLE9kOJc-o8kb8SXZqu5vWpTTxlqq6E6rkIJvkJ47LZ2NL43ODZ30HY/s1600/pctricksguru_image5.jpg" />
<!-- Links for the slides! -->
<ul>
<li>
<a href="#one"></a>
</li>
<li>
<a href="#two"></a>
</li>
<li>
<a href="#three"></a>
</li>
<li>
<a href="#four"></a>
</li>
<li>
<a href="#five"></a>
</li>
</ul>
</div>
- Save the widget and see your blog. You will be amazed. It looks very beautiful.
Note: Replace the
green text with the desired target link.
0 blogger:
Post a Comment