2 варианта статичного ротатора баннеров.

Здравствуйте, друзья, читатели и гости блога. Предлагаю вам 2 варианта ротатора баннеров для установке в блоге. В статье простой ротатор баннеров был задан вопрос как сделать, чтобы баннеры выводились "рандомно", то есть, чтобы после каждой перезагрузке страницы показывался новый.

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

Оба варианта можно увидеть в работе здесь. Попробуйте несколько раз перезагрузить страницу, чтобы видеть результат. Скопируйте сначала код к себе в блокнот, так как он заключён в полосу прокрутки.

Вариант 1.

Код.

<script type="text/javascript">
var mycrib = [];
mycrib[0] = '<noindex><a href="ссылка на страницу" target="_blank" rel="nofollow"><img src=" адрес изображения" alt="баннер1" width="220" height="220"></a></noindex>'
mycrib[1] = '<noindex><a href=" ссылка на страницу" target="_blank" rel="nofollow"><img src=" адрес изображения" alt="баннер2" width="220" height="220"></a></noindex>'
mycrib[2] = '<noindex><a href="ссылка на страницу" target="_blank" rel="nofollow"><img src=" адрес изображения" alt="баннер3" width="220" height="220"></a></noindex>'
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>

Для отображения большего количества баннеров добавляйте ещё строки -

mycrib[2] = '<noindex><a href="ссылка на страницу" target="_blank" rel="nofollow"><img src=" адрес изображения" alt="баннер3" width="220" height="220"></a></noindex>'

Соответственно. поменяв число в значении mycrib[3] и так далее.

Вариант 2. Здесь есть возможность добавить ещё краткое описание.

<script type="text/javascript">
function RandomNumber()
{
  var today = new Date();
  var num= Math.abs(Math.sin(today.getTime()/100));
  return num;
}
function RandomGraphics()
{
  var x = RandomNumber();
  if (x > .75)
{document.write('<a href="адрес страницы " target="_bottom"><img src="адрес изображения" width="240" height="240" alt="главная"/></a><br>краткий текст '); return;}
  if (x > .5)
{document.write('<a href=" адрес страницы" target="_bottom"><img src="адрес изображения " width="240" height="240" alt="красивая буква"/></a><br>Краткое описание '); return;}
  if (x > .25)
{document.write('<a href=" адрес страницы" target="_bottom"><img src=" адрес изображение" width="240" height="240" alt="комментарии "/></a><br>Краткое описание '); return;}
  if (x > 0)
{document.write('<a href=" адрес страницы" target="_bottom"><img src=" адрес изображения" width="240" height="240" alt=" картинка"/></a><br>краткое описание '); return;}
}
RandomGraphics();
</script>

Значение ширины и высоты width="240" height="240" меняйте на ваше усмотрение. Если вы подобрали баннеры одинакового размера, то вместо указанных 240 напишите "avto ".
Всё, что отмечено другим цветом меняйте на свои значения.

Для тех, кто совсем не хочет возиться со всеми кодами, могу предложить онлайн генератор баннеров. Подробно нет смысла на нём останавливаться. Вот ссылка. Переходите по ней, заполняйте поля слева - адрес страницы, адрес картинки, название. Подбираете нужную ширину и высоту. Определяетесь с количеством и временем ротации. Затем нажимаете на кнопку генерировать и, в открывшемся окне, копируйте готовый код.

Все коды ротатора баннеров устанавливаются в гаджет HTML/JavaScript.

У меня сегодня всё. Спасибо за ваш визит. Увидимся.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email