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


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

  1. Это что-то совершенно замечательное, на мой взгляд. Пока не знаю как и буду ли применять, но в закладки беру с благодарностью.

    ОтветитьУдалить
  2. Наташа, совсем по авке не узнала тебя. Пользуйся на здоровье. Не знаю, обратила ли ты внимание, но в тестовом есть ещё подобный , но динамический виджет. Бегущие баннеры.

    ОтветитьУдалить
  3. Вика, привет. Очередной интересный вариант! Как раз обратила внимание на бегущий. А о нём есть тоже сообщение? Что-то я "слегка отстала" от блогерской жизни.

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

    ОтветитьУдалить
  5. Вика, спасибо! Очень интересно, надо будет попробовать!

    ОтветитьУдалить
  6. Татьяна, обязательно попробуйте, удобно ведь. Забегу потом посмотреть.

    ОтветитьУдалить
  7. Установила, в конце страницы перед счетчиками, список галерей и конфеток. У вас в тестовом блоге под примером этих баннеров увидела еще один, там баннеры меняются без обновления страницы. Можно такой код тоже у вас попросить. Может вы уже писали об этом, а я пропустила.

    ОтветитьУдалить
  8. Сделала в генераторе, теперь баннеры сами меняются. Потом другие изображения подготовлю, установлю еще и со сменой при перезагрузке страницы! Спасибо Вика, еще раз, очень люблю ваш блог, столько всяких полезностей!!! ╰⊰⊹✿ ღ✿ღ ✿⊹⊱╮

    ОтветитьУдалить
  9. Татьяна, ага посмотрела. А насчёт где меняются есть ссылка в начале поста.

    ОтветитьУдалить
  10. Что то я как то прохлопала эту информацию, извините ツ Спасибо Вика! Перечитала, посмотрела!!!

    ОтветитьУдалить
  11. Вика, да, обратила внимание. Ранее его среди постов не было, и я так поняла, что планируешь о нем писать в будущем. И статические и динамичный, каждый хорош по своему.

    ОтветитьУдалить
  12. Наташа, да. Там код немного отличается от того что публиковала раньше, ссылка на который. Но будет из чего выбрать.

    ОтветитьУдалить
  13. интересно. некоторые уроки даю друзьям посмотреть.

    ОтветитьУдалить
  14. Привет, Семён. Спасибо за отзыв.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo