Выползающий слайдер в футере.

Полезный и интересный гаджет для блога- автоматически выползающая  боковая панель слайдер при прокрутке страницы. Реализация установки несложная и доступна всем.Гаджет работает на jquery и легко настраивается под дизайн страниц блога или сайта.Нужен или нет такой вид подачи информации на странице покажет время,но сам факт появления панели слайдера лишь в последний момент и не мешающий посетителям уже радует.

Практическое применение выползающего слайдера.

На практике слайдеры используются в различных партнёрских программах тизерных сетей для увеличения конверсии предоставляемых рекламных объявлений. Читателю ненавязчиво,но тем не менее именно в самый подходящий момент,когда страница уже дочитана,буквально под нос,подсовывают различные завлекающие тизеры для привлечения внимания и дальнейшего перехода на сайт рекламодателя.При самостоятельной же установке выползающего слайдера можно самому решать,что и куда вставить.Границы использования данного слайдера зависят больше от фантазии: кнопки социальных сетей,формы подписки,различные рекламные коды,ссылки на интересные сообщения и т.д и т.п.

Установка слайдера.

Так как гаджет работает на jquery ,то необходимо установить код, если он еще не установлен.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

Затем добавляем сам скрипт с настройками GSS  и HTML.

<style>#slidebox{
    width:500 px;
    height:150px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #FFFFFF;
    position:fixed;
    bottom:0px;
    right:-500 px;
    }</style>
<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();
      if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-100%'},100);
    });
});
</script>
<div id="slidebox">Место для ссылок тизеров баннеров,кнопок соцсетей,формы подписки и т.д. и т.п.</div>

<div id="last"></div>

Часть кода выделенную серым нужно добавлять в том месте откуда вы планируете начало выползания слайдера(это если величина написанного текста превышает средний размер и появление слайдера будет более эффективно раньше) или же оставить всё как есть и установить для Блогер в гаджет HTML/JavaScript  если на Вордпресс,то в соответствующий виджет для добавления различных кодов.

Настройки слайдера.

Настраивать слайдер можно под свой дизайн и предпочтения.Красным выделена переменная отвечающая за ширину блока.По умолчанию стоит ширина равная width: 500 px, а высота height:150 px ,но если у вас есть желание и слайдер должен растягиваться на весь экран,то значение ширины вместо пикселей нужно поменять на width:100%.Так же не стоит забывать,что если вы поменяете ширину то следовательно необходимо и поменять значение выделенное зелёным отвечающее за то насколько панель уходит за видимую часть страницы.