Красивый слайдер на CSS3 для Blogger

В этом посту будем создавать красивое слайд-шоу на CSS3 для Blogger.
Перелистование осуществляется вручную при нажатии на радиокнопки внизу изображения.
Есть возможность сменить изображения, сменив ссылки на свои.
Но они должны быть такого же размера.
Здесь можно просмотреть превью: DEMO

1) Переходим на панель инструментов Blogger-Шаблон
2) Нажмаем  Изменить HTML
3) Находим с помощью поиска (Сtrl+F) строчку:

]]></b:skin>

4) Перед ней (]]></b:skin>)вставляем нижний код:

/* 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;
}

5) Переходим Панель управления Blogger-Дизайн
6) Нажимаем добавить гаджет и выбираем HTML/Javascript
7) В него вставляем нижний код

<div id="slider1">
 <!-- Sildes -->
 <img id="one" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib5K51ZmWvcIqo4lKwakljV59mrDwVnMmLcuuwAvLfRut7kvovOoqrNqj33Ao2fVhD6BCrJ8mGR3ze8RdRB_kisbwuS3-CRPHeoBjYKBQ7SOCJ88qcKCnoz3A8Zenc7Fy2UT0L_CsEWgU/s1600/bt_image1.jpg" />
 <img id="two" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkHhhGMyaYw6OzOkUSLmBX8qmlqpeeUXIVDg7Awadwyjw0RynK9rG5SXn2l3oIcjfSw6EDplR3mXO_-ny37bO0QUpkoQ4UQkmTnQexkb3cdR8wYIQBMoEaM8T1evcxcwel0JuQ8aKvBwg/s1600/bt_image2.jpg" />
 <img id="three" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahC05bEFzek8iqQl5-H5gwCx9SXHeUP2qwLsYNlbPaCki_C7NjI2EtRBLOaQRHW2fDFe8jKl-20j-H6WPCWLrIWf4kll76LT8ic571Ry9y2JkpDZhtkGbVTOWTMKW0-d8cbU-ENsiLFg/s1600/bt_image3.jpg" />
 <img id="four" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE3o-JZy_2mnwlOnGH8Jch-z6HZDed7jK7sCE-hKLi5nxdzbIMNWEQMvwr4Yy9NTwngLTdIezB8q-NgLaVPsdM-PDDMBWrnRx5PB_MRX0kHfSqIxSA0cxro0RffWNZOIXiRqa0OtbiAgo/s1600/bt_image4.jpg" />
 <img id="five" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy_UvzyyuwOIm4hlQL0sBp6CLwIZ53NdJxoUKF5hRJlKKzUZwzubZW-uCY-mu9g06y7726MgGPBhHWlqjKaJbHKydShjzbizK4UF4dLV8TpC7UCoZzqBQRMsIh_yb3jc56cl8-xnH1bP8/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>

Ссылки на изображения выделены, их можно заменить на свои ссылки на изображения залитые на бесплатные хосты.
8) Теперь сохраняем Гаджет и любуемся.

На этом Все!

Мира и счастья Вам!

Источник