Слайдер для blogger

слайдер для блога
В этой статье вы узнаете, как делать простой слайдер для blogger. Слайдер – это эффектный виджет, состоящий из меняющихся картинок, это своего рода презентация, представляющая ваш сайт или блог. Можно по разному относиться к слайдерам, однако в умелых руках мы получим стильное дополнение к вашему дизайну.

Как вставить слайдер на blogspot

Похожий эффект можно добиться, создав галерею для вашего блога.
Так будет выглядеть наш слайдер.
слайдер blogspotЭтапы:

  1. Переходим во вкладку Шаблон –> изменить html, находим отрезок кода ]]></b:skin> и вставляем перед ним следующее:

    /*--Main Container--*/
    .main_view {
    float: left;
    position: relative;
    }
    /*--Window/Masking Styles--*/
    .window {
    height:250px; width: 500px;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    position: relative;
    }
    .image_reel {
    position: absolute;
    top: 0; left: 0;
    }
    .image_reel img {float: left;}
    /*--Paging Styles--*/
    .paging {
    position: absolute;
    bottom: 40px; right: -7px;
    width: 178px; height:47px;
    z-index: 100; /*--Assures the paging stays on the top layer--*/
    text-align: center;
    line-height: 40px;
    background: url(https://1.bp.blogspot.com/-e-v9GYybZSg/TdcdITdapZI/AAAAAAAAD-I/RKqZRg0lSjU/s1600/paging_bg2.png) no-repeat;
    display: none; /*--Hidden by default, will be later shown with jQuery--*/
    }
    .paging a {
    padding: 5px;
    text-decoration: none;
    color: #fff;
    }
    .paging a.active {
    font-weight: bold;
    background: #920000;
    border: 1px solid #610000;
    -moz-border-radius: 3px;
    -khtml-border-radius: 3px;
    -webkit-border-radius: 3px;
    }
    .paging a:hover {font-weight: bold;}

  2. Затем находим отрезок кода </head> и вставляем выше следующий код:

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function() {
    //Set Default State of each portfolio piece
    $(&quot;.paging&quot;).show();
    $(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);
    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $(&quot;.window&quot;).width();
    var imageSum = $(&quot;.image_reel img&quot;).size();
    var imageReelWidth = imageWidth * imageSum;
    //Adjust the image reel to its new size
    $(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});
    //Paging + Slider Function
    rotate = function(){
    var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
    $(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
    $active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)
    //Slider Animation
    $(&quot;.image_reel&quot;).animate({
    left: -image_reelPosition
    }, 500 );
    };
    //Rotation + Timing Event
    rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
    $active = $(&#39;.paging a.active&#39;).next();
    if ( $active.length === 0) { //If paging reaches the end...
    $active = $(&#39;.paging a:first&#39;); //go back to first
    }
    rotate(); //Trigger the paging and slider function
    }, 7000); //Timer speed in milliseconds (3 seconds)
    };
    rotateSwitch(); //Run function on launch
    //On Hover
    $(&quot;.image_reel a&quot;).hover(function() {
    clearInterval(play); //Stop the rotation
    }, function() {
    rotateSwitch(); //Resume rotation
    });
    //On Click
    $(&quot;.paging a&quot;).click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation
    return false; //Prevent browser jump to link anchor
    });
    });
    </script>

  3. Сохраните шаблон.
  4. Теперь перейдите во вкладку Дизайн, добавьте новый элемент HTML / javaScript и пропишите в нем:

    <div class="container">
    <div class="folio_block">
    <div class="main_view">
    <div class="window">
    <div class="image_reel">
    <a href=”Ваша ссылка 1”><img src="https://2.bp.blogspot.com/-1ot3ioCYwow/Tdcf3NzfIHI/AAAAAAAAD-Q/Ckavo7b8GMw/s1600/slider-image-1.jpg" alt="Слайдер для blogger" /></a>

    <a href=”Ваша ссылка 2”><img src="URL изображения" alt="Слайдер для blogger" /></a>

    <a href=”Ваша ссылка 3”><img src="https://4.bp.blogspot.com/-TCA28AlpMjI/Tdcf4MHoYuI/AAAAAAAAD-Y/NzvcJOrjM_4/s1600/slider-image-3.jpg" alt="Слайдер для blogger" /></a>

    <a href=”ваша ссылка 4”"><img src="ссылка на изображение " alt="Слайдер для blogger" /></a>
    <a href=”ваша ссылка 5”><img src="https://2.bp.blogspot.com/-0uxQB121U-A/Tdcf56FpJuI/AAAAAAAAD-g/ltXixg26NtM/s1600/slider-image-6.jpg" alt="Слайдер для blogger" /></a>

    </div>
    </div>
    <div class="paging">
    <a href="#" rel="1">1</a>
    <a href="#" rel="2">2</a>
    <a href="#" rel="3">3</a>
    <a href="#" rel="4">4</a>
    <a href="#" rel="5">5</a>

    </div>
    </div>
    </div>
    </div>

    Последний код меняете так, как вам нужно, подставляя ваши ссылки и ссылки на нужные изображения.

6 ответов к «Слайдер для blogger»

  1. Спасибо! На многих блогах видела такое чудо, хотелось себе установить тоже. Теперь сделаю! Ещё раз спасибо!

  2. Наконец-то есть решение. Давно искал и ничего подобного не находил.
    Встроенный виджет слайдов не подходил и не нравился.
    Отличное решение. Спасибо!

  3. Спасибо! Подскажите, где найти материал, как установить в Заголовке плывущее изображение. Вот такое, например: http://repin-book.ru/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *