”обновление”
”google”
Комментарии
  • Загрузка...
Ноябрь 2017
Пн Вт Ср Чт Пт Сб Вс
« Окт    
 12345
6789101112
13141516171819
20212223242526
27282930  
”заработок”

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

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

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

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

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

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

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

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


<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 баннеров, но прежде чем это делать, подумайте хорошенько. Сколько посетителей вашего сайта просматривают более одной его страницы? А сколько обновляют страницу более двух раз? Вот и получается, что первый баннер увидят все гости вашего ресурса, второй уже только часть. Третий баннер увидит еще меньше посетителей, а что говорить о десятом.

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

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

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

Оксана Круговая

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

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

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

  • Галина говорит:

    Спасибо-спасибо-спасибо!!!!! Так потихоньку и осваиваем технические трудности и настройки.

  • Иван говорит:

    Cпасибо! Очень интересно и полезно. Буду пробовать

  • Анна говорит:

    Спасибо! Как всегда — ценная информация!

  • Александр говорит:

    Спасибо! Как всегда очень полезная и ценная информация.

  • Валерий говорит:

    Здравствуйте. С адресом перехода понятно, а как взять адрес на картинку? Я пока новичок в интернете, поэтому немного путаюсь.http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif

  • Вячеслав говорит:

    Оксана, замечательная статья. Вы как всегда на высоте.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://oxamitta.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 
Внимание!!!
За содержание рекламы несет
ответственность рекламодатель.
Мой магазин
”одностраничник”
Бесплатно
”одностраничник”
Реклама
Новинки
”фотостудия”
”сайт”
”база”
Надо уметь
”фотошоп”


Copyright © 2017. Оксана Круговая.

Яндекс.Метрика Счетчик PR-CY.Rank