Слайдер-ротатор баннеров для блога.

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






Установка ротатора баннеров.



Простота установки слайдера-ротатора заключается в единовременном вмешательстве в шаблон блога,а в дальнейшем все изменения баннеров происходят лишь в HTML части кода,установленной в гаджете боковой панели.Первое с чего следует приступать к внедрению ротатора это установка кода подключения jquery,если до сих пор каким-то образом отсутствует на блоге.Проверив и если потребуется установим скрипт такого вида

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

  в раздел head в самом конце перед </head> .Следующую часть добавляем  в раздел body тоже в конце перед закрывающимся тегом</body>.Правда для Блоггер воспользуйтесь конвертером кода ,так как бывает в таком виде шаблон может выдавать ошибку. @v-gol.ru

<script type="text/javascript" src="https://docs.google.com/uc?export=download&id=0B__xB2sZtgF_eVh2ZnJsTHNweFU"></script>
<script type="text/javascript">
$(function(){$('#sroll-vgol').totemticker({row_height:'260px',speed:1800,interval:5000,mousestop:true,});});
$(function(){$('#sroll-vgol1').totemticker({row_height:'100px',speed:1800,interval:5000,mousestop:true,});});</script>



Следующая часть CSS-код,который отвечает за визуальные настройки блока показа ротатора баннеров. Его просто скопируйте и произведя настройки исходя из размеров баннеров закиньте в раздел для стилей шаблона блога.

<style>
#rapV-G{
 padding:0px;
 width:240px;/* ширина блока*/
 margin:0 ;}
#sroll-vgol{
 height:260px; /* высота блока*/
 overflow:hidden;
 margin:10; padding:0;   /* отступ влево право*/
 -webkit-box-shadow:0 1px 1px rgba(0,0,0, .4);
}#sroll-vgol li{
 display:block;
 background:#fff;  /* фон блока*/
 border-bottom:1px solid #ddd;  /* рамка блока цвет*/
 height:260px;
}</style>

Смотреть ещё

Ротатор для баннеров
Эффекты для фото на CSS.
Оформление блоков для кода
Для тех кому отказал Яндекс-директ

Ну и третья основная часть HTML-кода слайдера ротатора баннеров или картинок,куда и следует вносить все баннеры. Её необходимо будет поставить там,где по вашему должен выводиться показ рекламных баннеров. Так же можно просто скопировать весь код целиком и установить в гаджет НТМЛ,если процесс ковыряния в шаблоне вызывает у вас определённые затруднения.
<div id="rapV-G"><ul id="sroll-vgol">
<li> Код баннера</li>
<li>Код баннера </li>
<li>Код баннера </li>
<li> Код баннера</li>
</ul>
</div>


Настройки слайдера-ротатора баннеров


Все необходимые настройки внесены в код CSS и понятны, используя онлайн-редактор можно подогнать и установить наиболее приемлемые параметры блока показа баннеров. Время показа баннера на странице можно изменить в скрипте значение interval:5000 на большее или меньшее по желанию.Пример работы ротатора справа на странице.

Отправить комментарий