Attractive Solitary Css3 Slider For Blogger

Today, im    gonna  explain   How  to  add  attractive Solitary   slideshow for   blogger. Its   included Nice fade effect for  every  images. So  it will  make  your blog  attractive. You  can  change image by changing Image links. make sure  you  have to use same  pixel images.Im using  Css3  for  making  this slider,Try to add to your blog. its easy. Get my earlier slideshow  post here

Demo

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

/* slider www.bloggertrix.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;
}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste below code.

<div id="slider1">
 <!-- Sildes -->
 <img id="one" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmlhZRnO7SHK_Yn0lfxHP2K82Vfeh3_qGcyaN8KC5cpHhbMsp-mLbrRscQSxj-_lRs-LBfDDUW0zTnmHIXQfF1iHGLKHi1oRHx61zfFPZ3lur3_APg3S3GOrYE7rO-l-IfGKzVs5idz2A/s1600/bt_image1.jpg" />
 <img id="two" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsQZdzi-83u52IlU63GorYBzAZmlAZZDF6Ez0bpPNezbnWhCiR7Rww40zDIIFcR99VD4vg_sbIcdYJaxZ9YCzIUOKJz-6wPqZSVdJgcok3NaCbIJt2oT_aO__NvqT4xlntdQNdQODrhso/s1600/bt_image2.jpg" />
 <img id="three" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEmzZZ79D0w8d0tnSAB4c-WiL9fU3E2vX81AMd0GVtcVEysW9A3Tbll7LmHEUD-dRoc5TlxNaT7Eut6fQCxEyRr0QnJu8_fLmHyFLqc7A7AmgsYA7TVNI5c_LuNGe86CDuZo7NG_Dyxzg/s1600/bt_image3.jpg" />
 <img id="four" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJ0btWYyHiXncRRMkSjRNzvNrQprtq9-zzd9fgMhMbVxRy9TIU1B6s53P3gSd4iD72R33DVbfnu0aQyT6caHtgxlFmipY_HlYzRYSjObfM7QRbYoz_-v8qVlyYg4lILa-40Fgua4oCHm8/s1600/bt_image4.jpg" />
 <img id="five" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDlCi6XDFEerNwQW_TZLyFZl4o7biWRSV6T6e63n0mmTpFvlzN-_q7nQ0xG_NOTQxpKTafEJoPJ8xegpBXpIknma012Q-Qj0whRSTuif9hvlcFc1axLPbvRj796Js06hOx25OlnDJAnnU/s1600/bt_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>

Replace image links.
10. Now save your HTML/Javascript'.

    You are done...