Привлекающий внимание элемент для сайта

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

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

Угловой флеш баннер привлекающий внимание

Например, в боковой панели моего блога сейчас откручивается два баннера на две целевые страницы. Каждый из этих баннеров за один месяц засветился в среднем 30000 раз. Из этих 30000 показов в среднем каждый баннер привлек внимание 140-200 пользоветелй, т.е. CTR менее 1%. Это просто ужас какой-то 🙂

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

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

Откровенно говоря ничего сверх оригинального в нем нет. Такой баннер уже давно используется и решений в сети огромное множество. Просто мне на email один из подписчиков блога написал с просьбой поделиться этим скриптом. Раз просит один подписчик, возможно эта информация будет интересна и Вам.

Установка и настройка скрипта такого углового флеш баннера достаточно проста :).

1. Скачиваем этот архив, распаковываем и заливаем папку peel на хостинг в корневую папку (там где index.php или index.html).

2. Открываем файл peel.js и редактируем данные помеченные //. По идее там и настраивать особо нечего, пути все прописаны, поэтому достаточно просто указать ссылку на страницу, на которую будет переброшен пользователь по клику:

jaaspeel.ad_url = escape('http://pervushin.com/best-posts'); // ссылка баннера

3. Теперь необходимо заменить существующие картинки. В папке /peel/img расположено два изображения — small.jpg (маленькое — 100×100 px) и large.jpg (большое — 500×500 px). Рисуем свои с указанными размерами и заливаем их в папку img с заменой имеющихся там картинок.

4. Осталось добавить одну строчку в шапку сайта между тегами <head></head> (в wordpress это обычно файл header.php вашей темы):

<script src="/peel/peel.js" type="text/javascript"></script>

Все. Симпатичный, занимающий минимум пространства, не мерцающий, но привлекающий внимание, а значит эффективный угловой баннер установлен.

Удачи Вам друзья, успехов!

p.s. кстати, таким же образом можно продавать рекламу, которая не будет такой навязчивой и раздражающей для посетителей 😉


Комментарии

37 на запись "Привлекающий внимание элемент для сайта"
  1. Сергей Трутнев says:

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

  2. Плагин не устанавливается, не через админку, не через FileZilla.

    • Через файлзиллу плагин не установить, через него можно лишь закачать папку с плагином, а затем плагин необходимо активировать в админ части в разделе «Плагины».

  3. Елена says:

    Спасибо! давно задумывалась о таком баннере

  4. Ирина says:

    А где можно на него посмотреть, чтобы иметь представление, в каком месте страницы он установлен?

  5. Landorn says:

    Интересная штука =)

  6. Всякое бывает, но моя статистика говорит об обратном.

  7. я вот давно у вас заметил этот банер, и почему то не сомневался что вскоре увижу про него статью… а поставить его оказалось сплошное наслаждение… с легкостью в пару кликов и он уже красуется на моем блоге ..:) спасибо за чудесную статью..)

  8. Там в папке img две картинки, их меняйте. Нарисовали с красным фоном, тогда и угол будет красным.

  9. Не знаю, связано это или нет. Но у Меня теперь постоянно прокрутка страницы прыгает вверх, с некоторой периодичностью. Читать крайне неудобно.

  10. лариса says:

    здравствуйте Сергей!  я тоже хочу такую же Вашу штучку. только не знаю,где этот peel.js  живет. пожалуйста!

  11. Лариса says:

    Сергей, что-то у меня никак не получается.
    jaaspeel.big_path = ‘/peel/swf/large.swf’; // путь к large.swf   Вот здесь, что писать? То же, что и в следующей строке? Путь к large.jpg ? Что такое swf ?

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

      • Лариса says:

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

  12. Да-да, есть такое. В файле peel.js найдите строки стилей (вроде 30 и 47 строки), содержащих стиль position: absolute;. Поменяйте его на position: fixed;

  13. Т.е.? В посте ссылка на скачивание этого баннера и опубликована…

  14. Кеш браузера почистите.

  15. А ну хорошо. Как я сказал — это кеш браузера.

  16. Просто ссылка на картинку.

  17. К сожалению, не смогу. Я не представляю, что это за скрипт, да и с ucoz я не работал 🙁

  18. Алихан ЖАРАР says:

    статья класс!!!!

  19. За размер маленькой картинки отвечают строки:
    jaaspeel.small_width = '100';
    jaaspeel.small_height = '100';
    .
    Естественно саму картинку тоже необходимо сделать с указанным размером.

  20. не получается уменьшить большой уголок, меняю размер картинки, цифры в peel.js и ерунда получается. Какие действия необходимо проделать?

Спасибо, что оставили свой комментарий

banner