Креативный ротатор баннеров.




Стильный и креативный ротатор рекламных баннеров или просто слайдер для фотографий и картинок на ява скрипт.Использовать данный гаджет можно по разному.Красиво плавно сменяющаяся картинка привлекает внимание и не оставит равнодушным посетителя.Ротация баннеров происходит в непрерывном порядке и замирает при наведении курсора мышки.Не сложный гаджет  безусловно заслуживающий внимания.







Где разместить ротатор или слайдер.


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

<table style="text-align: left; width: 100%;" border="1" cellpadding="2"
cellspacing="2">
<tbody>
<tr>
<td style="vertical-align: top; width: 75%;">Место для текста<br>
</td>
<td style="vertical-align: top; width: 25%;">Место для баннеров<br>
</td>
</tr>
</tbody>
</table>

Заменив значение выделенное зелёным на ноль наша таблица станет невидимой для читателя,но все функции сохранятся.


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


Ниже размещён код ротатора,который на данный момент
расположен справа от текста статьи.Для тех кто не знает из чего состоит баннер ниже приведён код где просто нужно будет вставить ссылки и адреса урл картинок баннеров,которые можно скопировать при помощи правой кнопки мышки.Таких баннеров в контейнере можно разместить до восьми штук.

<a href="Ссылка"><img src="Урл баннера" alt="Описание"/></a>



Код ротатора баннеров

 <style type="text/css">  #mcis { display: none; } #sliderFrame { position: relative; width: 240px; margin: 0 auto; border:0px solid #000; }  #slider { width: 240px; height: 400px;  no-repeat 50% 50%; position: relative; margin: 0 auto; box-shadow: 0px 1px 1px #999999; } #slider img { position: absolute; border: none; display: none; } #slider a.imgLink { z-index: 2; display: none; position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; } div.mc-caption-bg, div.mc-caption-bg2 { position: absolute; width: 100%; height: auto; padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; }  #slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style>
 <script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame v-gol.ru">  <div id="slider">
<a href="Ссылка"><img src="Урл баннера" alt=""/></a> <a href="Ссылка"><img src="Урл баннера" alt=""/></a> <a href="Ссылка"><img src="Урл баннера" alt=""/></a></div>

Смотреть ещё

Слайдер- ротатор для блогаРотатор для баннеровЭффекты для фото на CSS.Как добавить форум на блогОформление блоков для кода


Настройка ротатора баннеров

К настройкам ротатора для баннеров можно отнести регулировку ширины width: 240px и высоты 400px,которые нужно изменять исходя из размеров ваших баннеров.Для визуальной привлекательности следует выбирать баннеры одного размера,хотя и разные вращаются,но как-то коряво всё это выглядит.

Не обращайте внимание на то,что при наведении пропадает картинка.Это происходит только у меня так как есть скрипты которые конфликтуют друг с другом и приходится чем то жертвовать. P.S. Увы данный скрипт на данный момент не работает,но не стоит расстраиваться,так как существует множество других вариантов.Советую посмотреть статью Слайдер-ротатор баннеров для блога. Пример работы ротатора справа на странице.

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