Ротатор баннеров просто!

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

Здравствуйте, друзья!

Мои дорогие читатели постоянно дают мне всевозможные идеи для написания статей и вот сегодня эта статья тоже написана по просьбе моей очаровательной читательницы.

Хотя, судя по комментариям, её уже ждут многие мои друзья.

Темой нашей сегодняшней беседы будет ротатор баннеров.

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

Думаю, что Вы уже знаете зачем нужен такой ротатор баннеров на Вашем блоге?

Он позволяет поместить несколько баннеров в одно место и показывать их друг за другом, что  очень экономит место на Вашем ресурсе.

В ротаторе могут быть баннеры с рекламой Ваших инфопродуктов или с партнёрскими программами, а может быть просто картинки-ссылки, ведущие на другие страницы Вашего же блога или блоги Ваших друзей. Я, думаю, если подумать, придёт немало идей как применить ротатор.

Сегодня мы рассмотрим 2 простых варианта установки ротатора — при помощи онлайн сервиса и при помощи простого скрипта.

Прежде, чем создавать ротатор, подготовьте картинки (баннеры). Картинки должны быть все одинакового размера.

Если Вы хотите вставить ротатор в сайдбар блога, то померяйте его ширину (это можно сделать при помощи линейки программы FastStone Capture). Определив ширину и высоту картинки, подгоните все баннеры под этот размер.

Изменить размер картинки можно во многих программах, которые мы уже рассматривали с Вами, например в простой программе Picture Manager Microsoft Office, которая входит в пакет Microsoft Office и есть на Вашем компьютере. В этой программе можно не только изменить размер, но и обрезать лишнее при необходимости.

Когда картинки будут готовы, дайте им имя (только НЕ на русском языке), загрузите их себе на хостинг в корневую папку public.html. И у Вас будут готовые ссылки на эти картинки.

Также картинки можно загрузить через админ-панель Вашего блога — «Медиафайлы» — «Добавить новый» и взять ссылки на картинки.

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

Когда всё будет готово, приступайте к установке ротатора баннеров.

Вариант 1

С помощью сервиса http://www.htmlbasix.com/banner.shtml

Этот сервис англоязычный, но я Вам даю расшифровку, хотя если пользуетесь браузерами Гугл Хром или Яндекс, то легко можете перевести.

htmlbasix

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

Когда заполните все поля, нажимаете кнопку «Generate». На новой странице откроется html-код, который Вы копируете и вставляете в то место на блоге, где хотите видеть ротатор.

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

Поэтому для себя я нашла другой вариант, которым и поделюсь с Вами.

Вариант 2

При помощи скрипта.

Так как я особо в скриптах не разбираюсь, то искала вариант наиболее простой. Кстати, перебирая различные варианты,настолько увлеклась,что решила — когда закончится лето обязательно изучу курс Евгения Попова JavaScript и jQuery, это на самом деле революционные технологии! С помощью их можно будет делать интересные вещи на блоге.

Ну, а пока поставим простой незамысловатый ротатор.

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

<script type="text/javascript"><!-- $rotator = { banners: [ {url: 'http://komandalider.ru/blog.html', img: 'http://inetnovichok.ru/img/blog2dnya.jpg', title: 'ПОДАРКИ ДЛЯ ВАС'}, {url: 'http://1000-k.ru/op/go/ledyboss/p/1000moneyel', img: 'http://inetnovichok.ru/img/Borisov.jpg', title: 'Стань тысячником и заработай на блоге'}, {url: 'http://1popov.ru/partner66/disc11', img: 'http://inetnovichok.ru/img/Popov.jpg', title: 'JavaScript и jQuery - революционные технологии'}, {url: 'http://1popov.ru/partner66/disc1', img: 'http://inetnovichok.ru/img/Popov2.jpg', title: 'ВСЕ ТЕХНИЧЕСКИЕ МОМЕНТЫ'} ], options: { width: '300', height: '300', target: '_blank', time: 4000 }, num: 0, exec: function(id){ document.getElementById(id).innerHTML = '<a href="' + this.banners[this.num].url + '" title="' + this.banners[this.num].title + '" target="' + this.options.target + '"><img src="' + this.banners[this.num].img + '" width="' + this.options.width + '" height="' + this.options.height + '" alt="' + this.banners[this.num].title + '"><\/a>'; if(this.num < this.banners.length - 1){ this.num ++; }else{ this.num = 0; } }, ready: function(id){ var loadevent = window.onload; window.onload = function(){ if(typeof loadevent == 'function') loadevent(); $rotator.exec(id); window.setInterval(function(){ $rotator.exec(id); }, $rotator.options.time); } } } $rotator.ready('banner'); //--> </script>

Советую Вам скопировать его в Блокнот и там провести изменения под себя, а потом уже готовый вставлять себе на блог.

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

В массиве banners находится 4 моих баннера, где URL — это ссылка, на которую ведёт баннер, img — ссылка на картинку, title — текст, который будет отображаться при наведении курсора.

Вы осторожно в Блокноте удаляете мои ссылки и вставляете свои. Смотрите внимательно, чтобы ссылки были внутри одинарных кавычек.

Можете, по желанию, добавлять ещё баннеры или убирать.

В объёкте options, поставьте размеры своих картинок: width — ширина, height — высота. А также time — время показа одного баннера (у меня стоит 4000 — это 4 сек.), можете выставить своё значение.
А target известное уже Вам значение — где будет открываться страница, если человек кликнул по баннеру, _blank — новое окно, top — в этом же окне.

Когда Вы сделали изменения, то копируете этот код, идёте в админ-панель своего блога «Внешний вид» — «Редактор» — файл header.php

И ПЕРЕД закрывающимся тегом </head> вставляете этот код. Нажимаете «Обновить файл».

Желательно, конечно, перед манипуляциями с кодом скопировать содержимое файла header.php в Блокнот. Так, на всякий случай. Вдруг что-то пойдёт не так, чтобы можно было потом его восстановить.

Далее, определяетесь куда Вы поставите ротатор. Если это сайдбар, то в админке блога «Внешний вид» — «Виджиты» берёте новый виджит «Текст» и вставляете туда этот код

<div id="banner">

Нажимаете «Сохранить». Обновляете страничку своего блога.

Ротатор баннеров должен начать работать сразу же.

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

Если же всё-таки что-то пойдёт не так — пишите в комментариях, попробуем разобраться.

С глубоким и искренним уважением к Вам, Людмила Винокурова

 

 

Комментариев (20)

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

    [Ответить]

    Людмила Винокурова Reply:

    Ой, Ксения! Уж Вы-то точно придумаете! ;)

    [Ответить]

  2. Присоединяюсь к Ксении. Много полезной информации. Частенько захожу к вам, Людмила, и еще ни разу не разочаровалась. На ротатор баннеров я со своими скудными знаниями не замахнулась бы. А после вашей статьи это уже не кажется чем-то невозможным. =)

    [Ответить]

    Людмила Винокурова Reply:

    Я думаю, что всё получится, Елена! Удачи Вам! Но, а если будут вопросы — пишите!

    [Ответить]

    Николай Чернов Reply:

    Люда, что значит? … к себе на хостинг в корневую папку public.html…

    [Ответить]

  3. Людмила, огромное спасибо за статью и ротатор баннеров. У меня всё прекрасно получилось. Спасибо! *IN LOVE*

    [Ответить]

    Людмила Винокурова Reply:

    Отлично, Олег! Я рада, что у Вас всё получилось! :)

    [Ответить]

  4. А дает ли размещение такого ротатора положительный результат? Я имею в виду, насколько он привлекает внимание пользователей и как хорошо они кликают на эти баннеры?

    [Ответить]

    Людмила Винокурова Reply:

    Оль, на разных блогах своя статистика. Зависит от посещаемости, от того, что Вы помещаете в ротатор. Можно установить и проанализировать, как это будет работать именно на Вашем блоге.

    [Ответить]

    Ольга Журбенко Reply:

    Я думаю, что в любом случае такие Баннеры привлекают внимание.

    [Ответить]

    Людмила Винокурова Reply:

    Конечно, привлекают!

    [Ответить]

    Мозгунова Ирина Reply:

    То, что ротаторы баннеров привлекают внимание , можете даже не сомневаться. По ним столько вопросов бывает на вебинарах, если у кого-то он есть на сайте.
    Я как отдалённую цель имела ввиду его поставить, но, опять же, статья Людмилы с подробным объяснением, возможно сделает эту цель более осязаемой.

    [Ответить]

  5. Людмила, цом-цом за статью, пойду ковыряться с кодами или сервисом! Если не получиться приду с вопросами. :-*
    Я так поняла, в сайдбаре это новый ротатор?

    [Ответить]

    Людмила Винокурова Reply:

    Конечно, обращайся, если что.
    Да, я установила ротатор для наглядности — чтобы было видно, что устанавливаете :)

    [Ответить]

    Ольга Журбенко Reply:

    Симпатично получилось =) И место экономится

    [Ответить]

    Людмила Винокурова Reply:

    Да, самый простой ротатор. Я вначале себе установила 3D, но он у меня работал только на главной странице, поэтому сделала этот, чтоб люди сразу же видели — что они устанавливают.

    [Ответить]

  6. Мне всегда не хватало таких доступных и простых советов, на самые частые проблемы блоггеров. Спасибо Вам огромное.

    [Ответить]

    Людмила Винокурова Reply:

    Пожалуйста, Роман!Согласна, статей в блогосфере много, а вот там, где всё разложено по полочком очень мало. Поэтому я и стараюсь объяснить как можно проще!

    [Ответить]

    Tатьяна Паломи Reply:

    Вот я например, моталась по блогам в поисках информации и толком ничего не нашла! А как Людмила объяснила, сразу все поняла. Коротко и ясно! 8)

    [Ответить]

    Людмила Винокурова Reply:

    Спасибо, девочки! Я старалась :)

    [Ответить]

  7. Людмила, спасибо большое за такой вот подробный урок. как же хорошо, когда вы так просто все объясняете, кажется, что все под силу сделать самой. Спасибо.

    [Ответить]

    Людмила Винокурова Reply:

    Конечно, Алла, у Вас всё обязательно получится сделать самостоятельно!

    [Ответить]

    Ольга Журбенко Reply:

    Я по Людиным статьям уже не раз что-то делала на блоге. Очень все доступно =)

    [Ответить]

    Людмила Винокурова Reply:

    Спасибо, моя дорогая! *ROSE*

    [Ответить]

    Ольга Журбенко Reply:

    :-[ Я и смайлики по твоей статье ставила. ]:-> А ты даже не оценила пока *SORRY*

    [Ответить]

    Ольга Журбенко Reply:

    Позвала тебя на смайлы, а они не работают :-D но разбираться буду уже после выходных

    [Ответить]

    Людмила Винокурова Reply:

    Вот-вот! Я лечу со всех ног, хочу от души порадоваться твоему дизу, вылить все эмоции — а смайлов нет :)
    После выходных, надеюсь разберёшься ;)

    [Ответить]

  8. Здравствуйте, Людмила! У вас очень интересный, нужный и полезный для многих ваших читателей, сайт, помогающий новичкам пройти сложный путь в Интернете, поэтому я с большим уважением вручаю вам заслуженный Кубок Признания! Вы сможете забрать его на моей странице http://medvedrossii.ru/nagradyi-sayta/kubok-priznaniya-3 и достойно им далее распорядиться. Удачи вам!

    [Ответить]

    Людмила Винокурова Reply:

    Спасибо, Александр, за признание успехов, но в Кубках признания я уже не участвую. Все желающие читатели моего блога смогут перейти на Ваш сайт по ссылке, которую Вы оставили в комментарии. Я её оставлю.

    [Ответить]

    Ольга Журбенко Reply:

    Я думала, что уже редко встречается эта эстафета. Ан нет. Второй раз за месяц вижу.

    [Ответить]

    Людмила Винокурова Reply:

    Нет, эти Кубки проходят постоянно. Можно в них 1-2 раза поучаствовать, но когда часто — это уже как-то однообразно получается.

    [Ответить]

    Ольга Журбенко Reply:

    Привлекательны они на начальном уровне. Да и то сомнительна их польза.

    [Ответить]

    Людмила Винокурова Reply:

    Да, согласна! Но это мы сейчас понимаем :-D
    А вначале это кажется таким здоровским! ;)

    [Ответить]

    Ольга Журбенко Reply:

    Люд, первые два-три месяца все в новинку. Ай меня заметили, ай меня оценили… Ай статью напишу, да еще и ссылки дам. А со временем понимаешь, что не стоило это делать то :-|

    [Ответить]

    Tатьяна Паломи Reply:

    Девчонки поначалу все теряют много времени на всякие безделушки, это нормально! Опыт и понимание приходит потом… 8)

    [Ответить]

    Мозгунова Ирина Reply:

    Вот ведь, а, рассуждают как столетние мудрые аксакалы, посмеиваясь над новичками…

    Людмила Винокурова Reply:

    Согласна, девочки! =)

    [Ответить]

  9. хм, пойду поюзаю сервис. :) люблю такие штуки — на них веселее и никакого беспокойства. %)

    [Ответить]

    Людмила Винокурова Reply:

    Потом напишите хоть — как получилось! =)

    [Ответить]

  10. Я тоже сразу обратила внимание на то, что в сайдбаре установлен ротатор). Значит, работает, привлекает внимание!
    Спасибо, Людмила, мне очень понравилась эта идея и я обязательно постараюсь ее применить на сайте. Очень тронуло то, что даже перевод к скриншоту сервиса добавлен, все готово к применению, бери и делай. =)

    [Ответить]

    Ольга Журбенко Reply:

    Люда всю работу за нас сделала) Остается только внедрить

    [Ответить]

    Людмила Винокурова Reply:

    Давайте, девочки! На Ваших блогах его можно замечательно применить! ;)

    [Ответить]

    Ольга Журбенко Reply:

    %) У меня в новой теме есть ротация картинок

    [Ответить]

    Людмила Винокурова Reply:

    Здорово! Ты можешь поставить свои картинки в этот ротатор?

    [Ответить]

    Ольга Журбенко Reply:

    Конечно. Ставлю рубрику и картинки крутятся :-[ Ток еще не до конца все доделала

    [Ответить]

    Tатьяна Паломи Reply:

    Оль, это тот ротатор, который у тебя в верху? Красиво смотрится! *THUMBS UP*

    [Ответить]

    Ольга Журбенко Reply:

    Симпатично, согласна. =) Но все таки геморройная тема.. Многое править пришлось

  11. А я вот подумала, что можно сделать такую штучку при помощи «бегущей строки , используя простой код htmlю Я часто делаю слайд-шой бегущей строкой, в которых при нажатии на каждый отдельный слайд можно перейти на определенный сайт!
    Спасибо за Ваш вариант, Людмила!! Я скопировала себе скрипт в блокнот! Думаю, что придет время и мне что-то подобное соорудить на своем сайте))

    [Ответить]

    Ольга Журбенко Reply:

    Бегущей строкой? Никогда не видела. Или просто внимания не обращала. Лора, а у Вас на сайте можно это посмотреть?

    [Ответить]

    Людмила Винокурова Reply:

    Да, Лора, бегущую строку тоже можно использовать, она также привлекает внимание.

    [Ответить]

    Tатьяна Паломи Reply:

    Девчонки, а где можно посмотреть ротатор в форме бегущей строки? Что то я такого не видела еще? *UNKNOWN*

    [Ответить]

    Лора Reply:

    Я писала уже в предыдущем комментарии, что на днях можно будет увидеть бегущую строку у меня на блоге. А так можно посмотреть как это выглядит на одном из форумов в слайдбаре. Там т текст и баннеры бегущей строкой. если будет интересно, то могу сделать статью по этому поводу))
    Вот ссылка http: //kalayda.net/news.html

    [Ответить]

    Лора Reply:

    да, бегущая строка и из текста и из картинок привлекает внимание!! и в принципе не надо плагин устанавливать) и менять картинки просто))

    [Ответить]

    Лора Reply:

    Людочка, получилась у меня активная ссылка на форум в одном комментарии.. Вы уж там подкорректируйте , пожалуйста) Что-то я не сообразила ее сделать неактивной…
    Честное слово- ненароком…

    [Ответить]

    Лора Reply:

    Я сейчас готовлю статью и в ней будет как раз слайд-шоу бегущей строкой ( «бежать» будут фотографии). Если будет интересно и понравится, расскажу как это делается! это в принципе очень просто и основывается на тегах xtml.

    [Ответить]

    Людмила Винокурова Reply:

    Лора, не переживайте, всё исправила.
    А статью почитаем с удовольствием, делайте ;)

    [Ответить]

    Лора Reply:

    пока только сделала статью, в которой есть слайд-шоу «бегущей строкой». Принцип в ней такой же как и для ротатора- при щелчке на определенной фотографии — переход на нужную страницу- в моем случае показывается фото в размере оригинала ( фото со страницы автора фото). Хотела поставить музыку — плейер, чтобы получилось музыкальная строка, но оказалось, что уже пару дней не работает сайт prostoplayer. Как только заработает- внесу изменения))
    Спасибо Вам за поддержку и понимание!!!

    [Ответить]

  12. Для меня с недавних пор, любой подобный плагин или просто ротатор баннеров имеет ценность в первую очередь только в том случае, если ему удается обмануть плагин Adblock для браузеров. Иначе, всей рекламе капец настает :)

    [Ответить]

    Людмила Винокурова Reply:

    Согласна, Дим, но я пока не знаю такого метода. Если узнаю, обязательно поделюсь с читателями. :)

    [Ответить]

    Tатьяна Паломи Reply:

    Люд, я правильно поняла, что такой ротатор не будет виден, если к нему применят плагин Adblock для браузеров? Или я что не поняла?

    [Ответить]

    Людмила Винокурова Reply:

    Таня, у меня стоит это расширение, но я всё равно вижу ротатор.

    [Ответить]

    Tатьяна Паломи Reply:

    Здорово! Тогда можно таких ротаторов сделать много и не опасаться, что их не увидят посетители! Я себе уже сделала экспериментальный. Все работает, просто супер! Осталось теперь подумать что в нем рекламировать! 8)

    [Ответить]

    Людмила Винокурова Reply:

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

    [Ответить]

    Tатьяна Паломи Reply:

    Да вот что то такое и хочу придумать, но пока меня муза не хочет посещать. 8)

    [Ответить]

  13. Как здорово! *BRAVO* Я в скриптах тоже не особо, но если есть что-то интересное и работающее, использую. Я вот подумываю сделать слайдер со определенными статьями в сайдбаре. Но вот мне интересно, некоторые скрипты (например, блок подписки на рассылку), тормозят загрузку страницы. Интересно, а этот скрипт не скажется негативно на скорости? Не проверяли, случайно?

    [Ответить]

    Людмила Винокурова Reply:

    У меня ничего не изменилось. А Вы можете проверить у себя после установки. Если что-то не понравится — убрать можно всегда.

    [Ответить]

    Елена Голоштенко Reply:

    Обязательно попробую в ближайшие дни протестировать работу ротатора!

    [Ответить]

    Людмила Винокурова Reply:

    Хорошо, Елена, дадите нам знать как у Вас получилось?

    [Ответить]

    Елена Голоштенко Reply:

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

    [Ответить]

    Людмила Винокурова Reply:

    Елена, а Вы точно код установили в файл header.php и сохранили файл?

    [Ответить]

    Елена Голоштенко Reply:

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

    [Ответить]

  14. спасибо, сейчас правда мне такое ненужно — так как сайт у меня совсем молодой и рекламу я пока не ставлю, но на будущее запомню эту страницу.

    [Ответить]

    Tатьяна Паломи Reply:

    Alex? Вы не рекламу в ротатор поставьте, а ссылки на самые хорошие свои статьи! Такой ротатор значительно повышает кликабельность на сайте!

    [Ответить]

    Людмила Винокурова Reply:

    да,потом это пригодится.

    [Ответить]

  15. Здравствуйте Людмила!Спасибо вам за полезную информацию,думаю она поможет многим! У меня такая ситуация,хочу вставить баннер ротатор с продажей рекламного места на свой блог ,прогуглил много, получил много информации но вставитх так и неполучайетса!Может поможете с кодом и как его вставить именно напротив названия блога!За помощь Ваш баннер будет крутится постоянно.
    Зарание благодарен.

    [Ответить]

    Людмила Винокурова Reply:

    К сожалению, я не ас в кодах и даю информацию только ту, с которой сама работала, т.е. как поставить баннер в виджит. С тем, о чём Вы пишите, мне не приходилось разбираться, поэтому как помочь Вам не знаю. Жаль….
    Попробуйте спросить в комментариях на блогах фрилансеров и тех, кто хорошо разбирается в кодах.

    [Ответить]

  16. этот ротаторстоит на главной странице вашего сайта?

    [Ответить]

  17. проще плагин поставить что бы не ковырятся каждый раз в коде когда нужно будет банера поменять , и ждавами лишними код не засирать 8)

    [Ответить]

    Людмила Винокурова Reply:

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

    [Ответить]

    Мозгунова Ирина Reply:

    А что, despero, ещё и плагин есть, помогающий устанавливать ротатор?

    [Ответить]

  18. Вот именно ротатор мне нужно поставить на своем сайте, для функциональности. Воспользуюсь вторым вариантом, твит

    [Ответить]

    Людмила Винокурова Reply:

    Удачи. Сергей!

    [Ответить]

  19. Спасибо! очень нужная информация. Делала баннеры пару раз через какой-то сервис, но не очень была довольна результатом. попробую еще разок

    [Ответить]

    Людмила Винокурова Reply:

    Удачи, Лилия!

    [Ответить]

  20. Татьяна 02.08.2014 @ 01:33

    Спасибо!!!! Вот точно такой ротатор и хотела. Очень красиво получилось на сайте, только вот не доходит, а если несколько таких ротаторов надо поставить, как это сделать, пробовала, но не получается

    [Ответить]

Комментировать