Самый простой ротатор баннеров (баннерокрутилка)

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

Вы, наверное, не раз замечали на сайтах, что при обновлении странички на месте одного баннера появляется совершенно другой. Замечали? Тогда вы видели ротатор баннеров в действии.

Ротатор баннеров позволяет на одном и том же месте устанавливать несколько баннеров. Сменяются баннеры при обновлении страницы или при переходе на другую страницу сайта(если ротатор стоит, например, в боковой колонке).

Пока ваш сайт молодой, на нем много места для размещения баннеров. Но, со временем, этого места начинает катастрофически не хватать. И вот здесь к вам на помощь придет ротатор баннеров.

Для его установки существует множество различных плагинов и скриптов. Я испробовала некоторые из них и выбрала для вас самый простой способ установки ротатора баннеров.

Ротатор баннеров для сайта

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

Вот такой код позволит вам создать карусель из трех баннеров:

<script>
var banner = new Array();
banner[0] = '<a href="http://ваш сайт.ru" target=_blank ><img src="http://адрес вашей картинки.png" alt="тема баннера" title="Посмотреть" width=190 ></a>';
banner[1] = '<a href="http://ваш сайт.ru" target=_blank ><img src="http://адрес вашей картинки.png" alt="тема баннера" title="Посмотреть" width=190 ></a>';
banner[2] = '<a href="http://ваш сайт.ru" target=_blank ><img src="http://адрес вашей картинки.png" alt="тема баннера" title="Посмотреть" width=190 ></a>';
var n = ~~(Math.random()*3);
document.write(banner[n]);
</script>

Конечно же, перед вставкой этот код вам потребуется настроить под себя.

Нужно заменить:

• http://ваш сайт.ru — на адрес сайта куда будет переход после клика на картинку баннера (для каждого баннера свой). Например: http://oxamitta.ru/saitwp
• http://адрес вашей картинки.png — на адрес картинки баннера. Например: http://oxamitta.ru/saitwp/images/svpress300.png

Еще необходимо для каждого баннера прописать alt и title. Не пугайтесь это совсем просто.

• alt — это тема вашего баннера. Лучше всего писать одним словом. То есть в коде слова “тема баннера” , заменяем на одно слово (русскими). Пример: вместо alt=”тема баннера” я для первого баннера напишу alt=”сайт”
• title — это слово которое будет появляться при наведении курсора на баннер. Можете вообще не менять или написать что-то свое для каждого баннера.

И осталось определиться с шириной баннеров. Лучше если она будет одинаковой. В коде ширина указана в пикселях — width=190. То есть в данном случае ширина моих баннеров 190 пикселей. Вы можете написать свою. Кстати, если даже ваши картинки будут другой ширины, то их ширина будет приведена к той, которую вы укажите. При этом картинка изменится пропорционально.

После внесения всех изменений в код, вставляете его в виджет. Переходите в консоль своего сайта → внешний вид → виджеты. Затягиваете блок “текст” в нужное место и вставляете в него отредактированный код. Не забудьте сохранить!

Этот небольшой скрипт ротатора баннеров можно увеличить — добавить количество баннеров.  В предлагаемом ротаторе три баннера, но вы можете добавить любое количество баннеров.

Продублируйте строку banner[2] нужное количество раз, заменяя в ней цифру номера баннера (следующий по порядку 3, потом 4 ит.д.). К тому же в строке — var n = ~~(Math.random ()*3); пропишите общее количество баннеров.

Добавить в такой скрипт можно и 10 баннеров, но прежде чем это делать, подумайте хорошенько. Сколько посетителей вашего сайта просматривают более одной его страницы? А сколько обновляют страницу более двух раз? Вот и получается, что первый баннер увидят все гости вашего ресурса, второй уже только часть. Третий баннер увидит еще меньше посетителей, а что говорить о десятом.

На самом деле самое оптимальное количество баннеров в баннерокрутилке — три. Хотя, конечно решать вам, сколько их будет.

Вот и вся установка и настройка самого простого ротатора баннеров. А для тех кто так и не смог разобраться — видео. Надеюсь после его просмотра вопросов ни у кого не останется.

Приятного просмотра...

Поделись с друзьями

Давайте дружить