Простой ротатор-слайдер баннеров на 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>
<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 на большее или меньшее по желанию.Пример работы ротатора справа на странице.
Отправить комментарий