Kак вставить слайдер из картинок сменяющих друг друга автоматически

                        Здравствуйте друзья!
 Сегодня я вам расскажу как вставить слайдер из картинок сменяющих друг друга автоматически-он может вам послужить и как баннер,реклама (только после того как вы удалите "черный слайдер") ,также при нажатие на цифры сверху 1,2,3,а когда наводите курсор на картинку ,смена картинок приостанавливается,

 Cам скрипт я взяла с интернета с одного сайта(спасибо автору) ,но я его изменила  и добавила функцию (скажем так) ,что при нажатии на любую из трех картинок,вас перекидывает на другие ресурсы.

 И это еще не все, этот виджет (слайдер) отображается только на главной странице ,т.е. при просмотре другого сообщения его не будет видно,такое можно проделать в принципе с любым виджетом -о других мы поговорим потом!Следите за новостями ,оставляйте отзывы,пишите комментарии заранее спасибо!

Kак это выглядит  посмотрите на моих видеоблогах:

http://ludmiladanilovidoblog.blogspot.de/

http://ludmiladanilo3.blogspot.de/

Посмотрите видео урок

Итак ,копируйте скрипт(он большой) ,вместо выделенных красных ссылок вставляете свои ссылки на картинки (они могут быть в Gif.,JPEK)
 Вместо ссылок синим цветом вставляйте  свои ссылки на ваши ресурсы.Зелёным  цветом название картинок .
_________________________________________________________________

<div id="raz">
 <a href="http://ludmiladanilo.blogspot.de/2015/04/moi-gif.html#more" target="_blank"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7khieWvEcAR_aosuAdN6UURWoxao0hyphenhypheneuQZIR6dQZMrxbWkY2pyjqurktFp9a2Cd-_W3HBfDrTZ2selErUhmo865FO3AdXtea2lP78wm5GklPxJkBeWJzXFqtIeSuuSs5JBpAWeqiq56u/s320/piony.gif" alt="georginy"/></a>
  <a href="http://videoblogludmiladanilo.blogspot.de/2015/09/navigation-v-videobloge.html" target="_blank"> <img src="https://lh3.googleusercontent.com/-tS3fn2IagQE/VbnGhgMB2OI/AAAAAAAADcc/_2ov-YtbcYI/w426-h240/tulpany.gif" alt="tulpany" alt="tulpany"/></a>
  <a href="http://videoblogludmiladanilo.blogspot.de/2015/05/smart-art-powerpoint_31.html" target="_blank"> <img src="https://lh3.googleusercontent.com/-UhMWklFFM-8/VaVGnJJLxnI/AAAAAAAADXI/8geFnPwR6Is/w426-h240/romashki.gif" alt="romashki"/></a>
  <div>
    <button type="button" value="0">1</button>
    <button type="button" value="1">2</button>
    <button type="button" value="2">3</button>
  </div>
<style>
#raz {
  position: relative;
  max-width: 100%;
  max-height: 400px;
  overflow: hidden;
}
#raz img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  outline: 300px solid #fff;
}
#raz div {
  position: relative;
  height: 0;
  margin-bottom: 60%;
  z-index: 3;
}
#raz img:nth-of-type(1) {
  z-index: 2;
}
#raz button:nth-of-type(1) {
  opacity: 0.4;
}
</style>
<script>
window.requestAnimationFrame = (function () {
        return window.requestAnimationFrame ||
               function (callback) {
                   return window.setTimeout(callback, 1000 / 60);
               };
})();
function slider(f, img, button, V, Vo) {
  var iii = 0,
      start = null,
      clear = 0;
  function step(time) {
    if (start === null) start = time;
    var progress = time - start;
    if (progress > V) {
      start = null;
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
        button[i].style.opacity = "1";
      }
      img[iii].style.zIndex = "1";
      iii = ((iii != (img.length - 1)) ? (iii + 1) : 0);
      img[iii].style.zIndex = "2";
      img[iii].style.opacity = "0";
      button[iii].style.opacity = ".4";
    } else if(img[iii].style.opacity != "") {
      img[iii].style.opacity = ((progress/Vo < 1) ? (progress/Vo) : 1);
    }
    if(clear != "0" && progress > Vo) {} else {requestAnimationFrame(step);}
  }
  requestAnimationFrame(step);
  f.onmouseenter = function() { if(clear == "0") clear = "1"; }
  f.onmouseleave = function() { if(clear == "1") {clear = "0"; requestAnimationFrame(step);} }
  for (var j=0; j<button.length; j++) {
    button[j].onclick = function() {
      clear = "2";
      for (var i=0; i<img.length; i++) {
        img[i].style.zIndex = "0";
      }
      img[this.value].style.zIndex = "2";
      img[this.value].style.opacity = "1";
      for (var k=0; k<button.length; k++) {
        button[k].style.opacity = ((button[k] == this) ? '.4' : '1');
      }
    }
  }
}
var f = document.getElementById('raz'),
    img = f.getElementsByTagName('img'),
    button = f.getElementsByTagName('div')[0].getElementsByTagName('button');
slider(f, img, button, '5000', '1000');
</script></div>
__________________________________________________________________________________
 Вставляйте обычным способом -Дизайн-добавить гаджет -HTML/JavaSckript-вставляйте в содержание -Обязательно напишите название (оно нам пригодится в последствии).

После установки скрипта ,перенесите его,поставте над сообщением (там где раньше стоял "черный слайдер") нажмите сохранить раcположение.

Теперь зайдем в шаблон-изменить HTML-нажимаем -форматировать шаблон-клавиши Ctrl+f,в окошке пишите-название вашего виджета. Находите его и после строки :

<b:includable id='main'>    вставляете вот этот код :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
далее после строк

<div class='widget-content'>
                      <data:content/>
                    </div>

вставляем тег      </b:if>   
Просмотрите шаблон,потом сохраните .

       Желаю  всем творческих успехов!
________________________________________________________________________________