Как сделать красивое слайд-шоу в Blogger

 Как сделать красивое слайд-шоу в Blogger

Как сделать красивое слайд-шоу в Blogger в первом варианте слайдера каждая картинка, это ссылка на указанную вами страницу.


Слайдер устанавливается очень просто.

В Дизайн - Добавить гаджет - HTML/JavaScript или редактор сообщения необходимо добавить следующий код:

<style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 350px; margin: 0 auto;
border:5px solid #000;
}
#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: no-repeat;
z-index: 7;
}
#slider {
width: 350px; height: 260px; background: #fff no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}

}
#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style><script src="http://code.helperblogger.com/js-image-slider.js#sthash.THuZbOyd.dpuf " type="text/javascript"></script><br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="ССЫЛКА НА СТРАНИЦУ"><img border="0" height="320" src="http://.blogspot.com/455777/56767/43554/s780/34777L.jpg" width="251" /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /></a> <a href="ССЫЛКА НА СТРАНИЦУ"><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /></a> </div>

 Ссылки и адреса картинок придется добавлять в "ручную"!  Красный цвет кода - это ссылки и адреса картинок.

Второй вариант картинки без ссылок, сдесь меняются только адреса картинок.

<style type="text/css">
#mcis {
display: none;
}
#sliderFrame {
position: relative;
width: 350px; margin: 0 auto;
border:5px solid #000;
}
#ribbon {
width: 111px;
height: 111px;
position: absolute;
top: -4px;
left: -4px;
background: no-repeat;
z-index: 7;
}
#slider {
width: 350px; height: 260px; background: #fff no-repeat 50% 50%;
position: relative;
margin: 0 auto;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 0px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}

}
#slider {
transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
</style> <script src="http://code.helperblogger.com/js-image-slider.js#sthash.THuZbOyd.dpuf " type="text/javascript"></script> <br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<img border="0" height="320" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " width="251" /><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /><img alt="" src=" http://.blogspot.com/455777/56767/43554/s780/34777L.jpg " /> </div>

Желательно, что бы картинки были одного размера! Размеры самого слайдера подгоняется выделенными красным величинами - width ширина (2 раза), height высота (1 раз)