2015-02-15

Textual description of firstImageUrl

Ротатор баннеров на любой сайт (баннерокрутилка)

ротатор баннеров скрипт

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

Содержание статьи:

Пример баннерокрутилки:

Чтобы баннеры менялись, вам нужно обновить страницу несколько раз.

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

Как добавить ротатор баннеров на любой сайт

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

/*

<script type="text/javascript">
var mycrib = [];
mycrib[0] = '<a href="ваша партнерская ссылка" target="_blank" rel="nofollow"><img src="ссылка на изображение баннера" alt="название баннера" width="300" height="250"></a>'

mycrib[1] = '<a href="ваша партнерская ссылка" target="_blank" rel="nofollow"><img src="ссылка на изображение баннера" alt="название баннера" width="300" height="250"></a>'

mycrib[2] = '<a href="ваша партнерская ссылка" target="_blank" rel="nofollow"><img src="ссылка на изображение баннера" alt="название баннера" width="300" height="250"></a>'

var x = 0;

function rotate(mycrib) {
while (x < mycrib.length) {
var sort = Math.floor(Math.random() * mycrib.length);
if (mycrib[sort] != 0) {
document.getElementById('adspace').innerHTML = (mycrib[sort]);
mycrib[sort] = 0;
x++;
}
}
}
</script>

<script>
#adspace {

}

#adspace img {

}
</script>

<div id="adspace">
<script type="text/javascript">
rotate(mycrib);
</script>
</div>

 

Скопируйте выше предложенный код, замените выделенное желтым цветом – на вашу партнёрскую ссылку, зеленым – ссылка на изображение, а фиолетовым – заполняем атрибут alt – название баннера. Не забудьте проставить размеры каждого баннера в коде скрипта (width – ширина баннера, а height – высота).

Если вы хотите прокручивать больше, чем три баннера, то добавьте еще несколько раз отрезок кода. Не забудьте лишь заменить цифру в квадратных скобках на следующую по счету. Так, при добавлении четвертого баннера у вас получиться mycrib [3] далее отрезок кода, пятого - mycrib [4] далее отрезок кода и т.д.

mycrib[1] = '<a href="ваша партнерская ссылка" target="_blank" rel="nofollow"><img src="ссылка на изображение баннера" alt="название баннера" width="300" height="250"></a>'

Эти отрезки кода, отвечающие за добавление дополнительных баннеров в баннерокрутику, нужно добавлять перед кодом var x = 0; в скрипт.

Этот ротатор меняет баннеры после каждого обновления страницы.

Полученный код нужно вставить

  • Если у вас Wordpress – в виджет Текст,
  • В Blogger (Blogspot) – в гаджет HTML/JavaScript,
  • на Ucoz – добавить новый блок и вставить в поле HTML.

по аналогии добавляем его в Joomla и dle.

Генератор баннерокрутилки:

Если вы не любите работать с кодами, то вы можете сгенерировать код скрипта ротатора баннера с вашими ссылками и баннерами. Для начала нужно привести все изображение баннеров к одному размеру ширины и высоты. Если у вас баннеры с различными пропорциями ширины и высоты, то можно изменять их размеры, добавляя прозрачный фон. Это можно сделать в программе Photoshop или Gimp.

Теперь переходим на страницу на страницу генератора

Сервис на английском языке, но там есть встроенный переводчик.

скрипт ротатора баннеров

Привожу доступный перевод функций генератора:

  • Automatically refresh image – автоматическое обновление изображения,
    если вы выбрали этот пункт, то укажите сколько секунд будет длиться просмотр каждого баннера (How often: secund)
  • New image with every page load – новое изображение после перезагрузки страницы,
  • Where do you want the page to open: – укажите как будет открываться ссылка – в том же окне или на новой странице (top, new или blank)
  • Image width и Image heigh – ширина и высота изображения соответственно.
  • Banner rotator number: 1. По умолчанию – 1, но у вас несколько баннерокрутилок на одной странице, то для каждого следующего ротатора используете другой номер.
  • url for link 1 – партнеркая ссылка 1,
  • url of image – соответствующая картинка (баннер)
  • alt text – название баннера.

После заполнения всех полей нажмите на “Generate” (генерировать) и вы получите код, который вам нужно будет встроить в свой блог.

Узнайте как повысить цену клика в Google Adsense

Ротатор баннеров на wordpress

Интересным плагином для wordpress, выполняющим ротацию баннером является  Simple Ads Manager.

Установите и активируйте плагин. В результате в левой панели админки Wordpress у вас появится раздел “Реклама”.
плагин баннерокрутилки
Выберите подрубрику “Новое место”. Добавляем название и описание. Здесь еще есть дополнительные настройки. Сохраняем изменения.

Теперь жмем на вкладку “Рекламные места” –> Название вашего рекламного места –> Новое объявление

ротатор баннеров на wordpress

Даем название объявлению, описание (не обязательно) и добавляем код объявления (это может быть изображение со ссылкой, флеш, скрипт м пр).

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

Здесь также вы найдете множество настроек –  количество показов, приоритет, на каких страницах запретить показы и прю

Как вставить баннерокрутилку:
Код с id ротатора баннера:

<!--?php if(function_exists('drawAdsPlace')) drawAdsPlace(array('id' =--> 2), true); ?>

Теперь идем в редактор блога и вставляем этот код туда, гже вы хотите видеть рекламу.

Как сделать ротатор баннеров на ucoz

Идем в админ панель ucoz. Здесь переходим по пути Инструменты –> Ротатор баннеров

ротатор баннеров на ucoz

Создаем категорию:

категория ротаторов баннеров юкоз
Нужно лишь дать ей название.

Теперь нажмите на кнопку “Добавить баннер”:

баннерокрутилка юкоз

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

Таким образом мы добавляем несколько баннеров в одну категорию. Когда все баннеры будут добавлены – скопируйте код категории:

получить код

Включите конструктор на главной странице сайта ucoz, добавьте новый блок, вставьте код баннерокрутилки в режиме HTML и сохраните изменения.

И еще приятное для владельцев блогов - скрипт от юкоа можно добавить на блоги других платформ, и он будет прекрасно работать!

Спасибо за внимание!

7 комментариев :

Анонимный комментирует...

Статья хорошая. Мне про Ucoz вообще сильно помогло, так как я ещё только начинаю своё знакомство со всем этим миром. Автору +++

Иванова Наталья комментирует...

Да, ucoz предлагает хороший вариант баннерокрутилки, но не каждый будет заводить сайт на юкозе лишь для этой цели.

Алексей Рупор комментирует...

Подскажите, как поставить более одного такого виджета? Один работает но когда добавляю еще то остается один но с ссылками от нового. Может часть кода нужно удалить? Какую? Спасибо.

Иванова Наталья комментирует...

Алексей, вам достаточно в другой баннерокрутилке сделать собственный идентификатор. В примере идентификатор <div id="adspace"> замените его на другой id, например id='bannerpro' или придумайте свое название. Измените во всем коде идентификатор на тот, который вы придумали. Особенно это важно в этой строке:
document.getElementById('adspace').innerHTML = (mycrib[sort]);
Она примет вид:
document.getElementById('bannerpro').innerHTML = (mycrib[sort]);
Если непонятно - пишите.

Анонимный комментирует...

Спасибо тебе добрый человек! Ты мне реально сильно помог!

Berg Offender комментирует...

А что делать если у меня на юкозе админ панель вообще не такая? В такую как увас я зайти не могу, а в той которая есть нет таких функций

Иванова Наталья комментирует...

Bern Offender, не знала, что админке на юкозе могут различаться... Может, плохо искали?

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности