Простой ротатор баннеров для блога.

ротатор баннеров Привет, друзья. Если вы работаете с несколькими партнёрскими программами, то для размещения баннеров этих программ необходимо выискивать место в боковой панели. Уместным будет сделать простой слайдер для этого размером 125 на 125. Где есть возможность разместить неограниченное количество баннеров. При нажатии на который, пользователь переходит на саму партнёрку.


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

Или сделать просто такую нехитрую галерею изображений. Подумайте.

В блогере с установкой слайдера сложного ничего нет. Код совершенно простой. Устанавливается в гаджет HTML/JavaScript. Используем свойство marquee direction, которое и определяет движение содержимого. Немного ещё добавим стилей.

Рабочий вариант можно увидеть на тестовом блоге вверху на боковой панели.

Сначала скопируйте код, приведённый ниже в блокнот.
<div align="center">
<marquee direction="up" scrollamount="3" style="background- text-align: center;
width:125px;height:125px;border:1px solid #000000;padding:3px"
onmouseover="this.scrollAmount='0'" onmouseout="this.scrollAmount='2'">
<a href=' Адрес куда должна вести ссылка' target='_blank' title='название '><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>
<a href=' Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src="путь к картинки (адрес изображения) " width="125" /></a>
<a href='Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>
</marquee>
</div>
В коде я установила ширину и высоту всего блока в 125 пикселей. Можно задать любую желаемую.

Свойство border:1px solid #000000; отвечает за ширину и цвет рамки. В строку, выделенную синим цветом, вставляйте адреса, куда должна вести ссылка. И красный цвет это адрес изображения самого баннера или картинки.

Чтобы добавить ещё баннеры вставляйте вот такой участок кода.

<a href='Адрес куда должна вести ссылка ' target='_blank' title=' название'><img border="0"
height="125" src=" путь к картинки (адрес изображения)" width="125" /></a>

Вот и все настройки. Думала написать, как сделать такое только с кликабельными ссылками без картинок, но оказалось, что этот пост у меня уже есть.

На этом у меня сегодня всё. Спасибо, что заглядываете в мои шпаргалки. Удачи всем.

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

Введите Ваш email


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

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

    ОтветитьУдалить
    Ответы
    1. Вы можете подобным образом отображать ваши замечательные фото. Или список своих любимых блогов. Тут масса применений.

      Удалить
  2. Спасибо Вика! Оказывается всё просто, а я думал, что нужно использовать специальные скрипты или сервисы! Для меня эта информация очень релевантна и скорей всего в скором воспользуюсь ей для реализации ротатора баннера.
    Спасибо

    ОтветитьУдалить
  3. Игорь, привет. Да, есть много вариантов с использованием сторонних сервисов и скриптов. Тут вообще всё просто. Когда воспользуетесь. дайте знать.

    ОтветитьУдалить
  4. Здравствуйте. Отличный ротатор! А как сделать, чтобы баннер задерживался, скажем на 5 секунд, и дальше менялся на новый, который так же делал паузу на 5 сек?

    ОтветитьУдалить
    Ответы
    1. Александр, за скорость смены отвечает атрибут scrollamount. Чем выше значение, тем быстрее перемещается содержимое контейнера. Если значение равно нулю, то движения не происходит.

      Удалить
  5. Здравствуйте!Скажите,никак не появится реклама от Google Adsense.Блог Активен уже 2 месяц,за это время рекламные блоки много раз попадали в неиспользуемые.В чем может быть причина(писала на форум-говорят,может код не верно вставила).Помогите,заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. Юлия Косметолог, так я вам не смогу ответить. Дайте ссылку на блог. И надо бы уточнить куда и как вы вставляли код. Напишите мне на почту через форму связи ниже.

      Удалить
  6. А как сделать этот код, чтоб былбы не скрол а рандомный показ банера или обновив сайт показывает каждый раз новый баннер? не подскажете?

    ОтветитьУдалить
  7. Можно и на почту dlyanas.ru@gmail.com
    Заранее благодарен!

    ОтветитьУдалить
  8. Dlya Nas, можно сделать при помощи сервиса. http://www.shpargalochki.ru/2014/09/rotator-bannerov-ot-servisa-inetclickru.html, а можно с помощью скрипта. Давайте напишу его на днях, следите.

    ОтветитьУдалить
  9. Вика здравствуйте. Подскажите в какой статье вы описывали код для банеров (как в вашем эксперементальном блоге http://my-testoblog.blogspot.ru на боковой панели 4 банера здесь может быть ваша реклама 120*120) Заранее спасибо.

    ОтветитьУдалить
  10. Lili4ka, я думаю, Вы это имеете ввиду. http://www.shpargalochki.ru/2015/05/sdelat-reklamnoe-mesto-v-bloge.html. Буквально сегодня начала писать, такой же но с рандомным выводов картинок. Посмотрим, что получится.

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

Пользовательский поиск