Привлекающий внимание элемент для сайта
Бывают такие моменты, когда требуется привлечь максимально возможное внимание посетителей сайта к какой-либо странице сайта. Неважно что это — конкурсная статья или может быть страница с уникальным предложением, важно, чтобы как можно большее количество посетителей сайта увидели эту страницу.
Можно, конечно, разместить баннеры в боковой панели или в шапке сайта, как впрочем мы обычно и поступаем, но сегодня такие баннеры уже плохо работают. Люди, все мы, настолько привыкли к баннерам, что научились игнорировать их.
Например, в боковой панели моего блога сейчас откручивается два баннера на две целевые страницы. Каждый из этих баннеров за один месяц засветился в среднем 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. кстати, таким же образом можно продавать рекламу, которая не будет такой навязчивой и раздражающей для посетителей 😉
Спасибо тезка, мне как раз нужен такой, а то используемый ранее плагин перестал работать после смены шаблона блога. Я уж подумывать стал о возвращение, а тут и ты со своими плюшками подоспел как раз вовремя 🙂
Здорово, когда вовремя ;)!
Ну вот и все получилось, только script пришлось не в head размещать, а в body, иначе шаблон слетал напрочь. Вероятно, что из-за этой же проблемы и плагин перестал работал.
А вообще, еще раз спасибо
В смысле, как слетал? Что-то странное…
Плагин не устанавливается, не через админку, не через FileZilla.
Через файлзиллу плагин не установить, через него можно лишь закачать папку с плагином, а затем плагин необходимо активировать в админ части в разделе «Плагины».
Спасибо! давно задумывалась о таком баннере
Значит вовремя я, это хорошо 🙂
А где можно на него посмотреть, чтобы иметь представление, в каком месте страницы он установлен?
В углу моего блога как раз этот баннер висит 😉
На широком экране его вообще не видно, до туда глаз не доходит)) А вот на ноутбуке самый раз. Попробуйте красный цвет, конверсия думаю повысится на несколько процентов, а может и больше.
Да, конечно, это я так, на быструю руку темный градиент запулил, а красный цвет, несомненно, привлечет большее внимание.
На широком экране он же не за пределами экрана?
Да, он корректно отображается, просто от него до сайта слишком много пустого пространства, сразу не замечаешь его.
Интересная штука =)
Всякое бывает, но моя статистика говорит об обратном.
я вот давно у вас заметил этот банер, и почему то не сомневался что вскоре увижу про него статью… а поставить его оказалось сплошное наслаждение… с легкостью в пару кликов и он уже красуется на моем блоге ..:) спасибо за чудесную статью..)
Спасибо!
Там в папке img две картинки, их меняйте. Нарисовали с красным фоном, тогда и угол будет красным.
Не знаю, связано это или нет. Но у Меня теперь постоянно прокрутка страницы прыгает вверх, с некоторой периодичностью. Читать крайне неудобно.
Не знаю, не знаю, замечено не было.
здравствуйте Сергей! я тоже хочу такую же Вашу штучку. только не знаю,где этот peel.js живет. пожалуйста!
Здравствуйте, Лариса! peel.js находится в архиве. Скачайте его и залейте на хостинг.
Сергей, что-то у меня никак не получается.
jaaspeel.big_path = ‘/peel/swf/large.swf’; // путь к large.swf Вот здесь, что писать? То же, что и в следующей строке? Путь к large.jpg ? Что такое swf ?
Если Вы загрузили папку из архива как есть, тогда здесь ничего менять не требуется.
Сергей, я не знаю, что именно сработало, но после того, как несколько раз все удалила и заново залила на хостинг, наконец-то в блоге стал отображаться угловой флеш-баннер.
Спасибо за такую красивую и полезную фишку!
Да-да, есть такое. В файле peel.js найдите строки стилей (вроде 30 и 47 строки), содержащих стиль position: absolute;. Поменяйте его на position: fixed;
Т.е.? В посте ссылка на скачивание этого баннера и опубликована…
Кеш браузера почистите.
А ну хорошо. Как я сказал — это кеш браузера.
Просто ссылка на картинку.
К сожалению, не смогу. Я не представляю, что это за скрипт, да и с ucoz я не работал 🙁
статья класс!!!!
За размер маленькой картинки отвечают строки:
jaaspeel.small_width = '100';.jaaspeel.small_height = '100';
Естественно саму картинку тоже необходимо сделать с указанным размером.
не получается уменьшить большой уголок, меняю размер картинки, цифры в peel.js и ерунда получается. Какие действия необходимо проделать?
Те, которые описаны ниже в комментарии, больше ничего не требуется.
в комментарии написано про маленький уголок, а большой как изменить?
jaaspeel.big_width = '650';ну и картинку соответственно.jaaspeel.big_height = '650';