Доброго времени суток, всем читателям – Sozdaiblog.ru!
В этой статье я расскажу, как сделать угловой flash баннер для сайта.
Не каждый из Вас знает, что такое – «flash», поэтому, не буду забивать Вашу голову разной терминологией, а для общего развития и понимания скажу, что flash – это специальная мультимедийная технология, благодаря которой, можно создавать различную анимированную графику для Веб-сайтов.
В правом верхнем углу блога, Вы можете наблюдать отогнутый кусок страницы, который, как бы покачивается на ветру, создавая эффект живой анимации. Это и есть угловой flash баннер.
Если Вы, наведёте на него курсор мыши, то он распахнётся и покажет скрытую в нём информацию.
Наполнить его можно любым материалом, на который у Вас хватит фантазии. Это может быть реклама, ссылка на определённую страницу сайта, подписка на рассылку и многое другое.
Но вся его прелесть в том, что он не отвлекает читателей, как постоянно всплывающие баннеры на разных сайтах, которые уже всех просто достали. Он ненавязчиво и красиво располагается в отведённом ему месте, привлекая внимание посетителей.
Сейчас многие Веб-мастера используют систему flash, для создания живой анимации и точно такой же flash баннер можно увидеть на многих сайтах. Единственное различие в том, что каждый использует его по-своему.
Поэтому я расскажу, как сделать флеш баннер, а как его применить Вы решите сами.
Для создания флеш баннера, Вам потребуется скачать архив, в котором находятся специальные скрипты. Затем, его нужно разархивировать и содержащуюся в нём папку – peel, закачать в корневой каталог Вашего ресурса (туда, где папки – «wp-content», «wp-admin» и «wp-includes»).
Теперь, Вам нужно её открыть и найти файл — peel.js.
Внутри этого файла находятся настройки флеш баннера. Всё, что можно и нужно редактировать помечено двумя слешами – «//».
Давайте разберём их более подробно:
jaaspeel.ad_url = escape('http://Ссылка'); // ссылка баннера, перебрасывающая читателя в нужное Вам место jaaspeel.small_path = '/peel/swf/small.swf'; // путь к small.swf jaaspeel.small_image = escape('/peel/img/small.jpg'); // путь к small.jpg, маленькому изображению jaaspeel.small_width = '100'; //Настройка ширины закрытого флеш банера jaaspeel.small_height = '100'; //Настройка высоты закрытого флеш банера jaaspeel.small_params = 'ico=' + jaaspeel.small_image; jaaspeel.big_path = '/peel/swf/large.swf'; // путь к large.swf jaaspeel.big_image = escape('/peel/img/large.jpg'); // путь к large.jpg, большому изображению jaaspeel.big_width = '650'; // Настройка ширины открытого флеш банера jaaspeel.big_height = '650'; // Настройка высоты открытого флеш банера
Сами картинки находятся всё в той же папке – peel, но в существующей там подпапке – img. Вы можете самостоятельно загружать в неё любые необходимые Вам изображения, соблюдая соответствующее им разрешение (jpg или png).
После того, как Вы определитесь с картинками и назначением флеш баннера, Вам потребуется открыть папку с активной темой оформления, найти файл — header.php и перед закрывающим тегом — </head>, установить следующий скрипт:
<script type="text/javascript" src="/peel/peel.js"></script>
Больше, ничего делать не нужно, флеш баннер должен работать и привлекать внимание читателей.
Лично для меня было единственной проблемой – это правильное позиционирование изображения. Оно ни как не хотело нормально отображаться, постоянно смещалось и разъезжалось. После нескольких часов мучения я его победил.
Интересно, а у Вас, возникли проблемы с установкой и настройкой flash баннера?
На сегодня это всё. Я надеюсь, что Вам понравился угловой флеш баннер и повествующая о нём статья.
До следующих статей…
С уважением, Денис Черников!
Сколько на блогах видел, смотрел но не когда не кликал
А Вы попробуйте, может там что-то полезное для Вас будет!
Я себе как-то поставил, но потом убрал. Увеличения кликов не заметил, а вот на скорость загрузки сайта заметно повлияло
Клики будут заметны, когда посещаемость хорошая будет, лично я не заметил сильного провала в скорости!
Спасибо за еще одну полезность.
Пожалуйста, Марина! Надеюсь, что Вы разобрались с установкой!
Пока нет, но после выходных займусь этим в плотную.
Правильно, Марина! Выходные нужны для отдыха, а я вот уже забыл, что такое отдых!(
Я думала о создании такого уголка, но пока руки не доходят.
Вот, теперь есть повод!
Кажется есть плагин с таким же эффектом?
Юлия, Вы чего так боитесь с кодом поиграться? Забудьте Вы эти плагины, научитесь обходиться без них!
Не думаю, что на скорость повлияет. Вот если бы плагином уголок делать, то тогда больше шансов. Надо будет поковыряться на досуге с этим скриптом.
Привет, Олег! Вы правы на счёт плагина, от него то и будет скорость падать, а тут подумаешь маленький скриптик, хуже не станет, уверяю!
Я все время смотрю, у кого на сайте есть такая отогнутая страничка и облизываюсь, мне тоже хочется, но я боюсь, что пока до этого не до росла. Корневую папку боюсь трогать, вдруг сайт перекосит. Но надеюсь, когда-нибудь вырасту))
Таисия, хватит боятся, делайте бэкапы и вперёд. Вам всё равно придётся разбираться в кодах, конечно не обязательно быть профи, но небольшие навыки нужны.
Спасибо, Денис, что поделился столь ценной инфой. Давно хотел сделать такое на своем сайте. Обязательно буду применять! Радуй и дальше нас своими «фишками» по улучшению дизайна сайтов.
Пожалуйста, Владимир!
По мере возможности, буду стараться преподносить новые сюрпризы, но и Вы меня не забывайте, почаще заглядывайте в гости!
Да,Денис! Всегда посещаю твой сайт! Тем более подписался на рассылку. Просто на 3 недели уезжал.
Главное, что вернулись!
Попробую сделать, надеюсь, что получится
Если что, спросите! Чем смогу подмогну!
Денис , Здравствуйте я заменил картинки но large.jpeg но стоят те что как бы по умолчанию !? намекните что не так.
С уважением.
Нужно удалить картинки по умолчанию, а вместо них поставить свои с нужным Вам названием и расширением, которые прописаны в файле с настройками. И кэш браузера потом почистить не забудьте, заодно ещё и плагин кэширования обнулите если есть!
Красиво конечно, но у меня на скорость загрузки влияет, я его удалил. А как у вас Денис, не проверяли?
У меня нормально, может и влияет, но я этого не ощущаю! Скорость загрузки сайта менее секунды.
у меня тоже меньше секунды, а с уголком больше двух. Да бог с ним, обойдусь без него. спасибо за быстрый ответ.
Пожалуйста, странно, что у Вас есть с этим проблемы!
И уголок работает, только как-то быстро переключает на ссылку, даже мышкой ничего ещё не делаю. Зашёл сюда по поиску увеличения фотографий, а много полезного нашёл, спасибо тебе, Денис.
Пожалуйста, Георгий! Тут много всего интересного!
Я уже в действии посомтрела на другом сайте ваш код. Классно и у вас мне нравится. А у меня шаблон старенький и особенный. В хедере нет закрывающего так куда мне вставить код?
Какого именно тега у Вас нет в хедере?
вот этого конечно и нет
Ставьте после открывающего. Разницы нет ни какой!
Примеров не хватает на сайте
Может Вы свой предложите?
Здравствуйте Денис поставил угловой банер,поменял картинки,но при отворачивании страницы картинка отображается не вся а как бы урезанная со всех сторон.Не подскажете что еще нужно подредактировать чтобы исправить ошибку. Ширину и высоту открывания углового банера пробовал сделать больше,изображение тоже увеличивается но все равно обрезанное.А вообще прикольная штука сбасибо огромное.
Здравствуйте, Евгений! Здесь только редактировать саму картинку необходимо. Я в своё время долго бился, пока не подогнал под нужный размер.
Ок спасибо,буду пробовать о результатах отпишусь.
Хорошо, занимайтесь!
спасибо Денис…давно хотел такую штуку внедрить на одном своем блоге, сделал за полчаса с учетом работы в фотошопе с файликами small.jpg и large.jpg…всё заработало с первого раза!!!..успехов во всем!!!
Пожалуйста, Alex-iHerb!
Спасибо, за пожелания! Заходите ещё!
Здравствуй Денис!
Поставил баннер по твоему руководству, он встал, только коряво — его загораживает изображение заголовка, и поле «поиска по сайту», которое вообще было бы не плохо удалить. Не подскажешь как со всем этим бороться.
Заранее спасибо.
Привет, Александр!
Загораживает потому-что баннер ниже по уровню слоёв лежит, там верстать нужно и или его поднимать над поиском или поиск сносить. Короче, это верстать нужно.
Спасибо за быстрый ответ!
Поле поиска сносить нужно однозначно!
Я думаю мой случай не единичный, я имею в виду слои и верстать…
Может подскажешь хотя бы в каком направлении копать…а там глядишь и сами докумекаем…
Думаю не только мне эта инфа пригодится…
Пожалуйста, Александр!
Есть такая тема, вот к примеру видео может наезжать на некоторые элементы (окна, баннеры и т.д.) Чтобы такого не происходило в видюшный код добавляют правило value=”opaque”. Это его приземляет и оно расценивается браузерами, как обычная картинка и видео перестаёт наезжать на другие элементы. Идите в этом направлении!
Здравствуйте, Денис. Все получилось сразу… маленькую картинку подогнала за 5 подходов. Большая встала сразу. Не поняла, почему этот уголок работает только на главной странице блога… а у Вас на каждой. Где-то что-то просмотрела.
Здравствуйте, Евгения!
Вообще должно работать везде. Возможно, что-то с чем то не контачит, нужно смотреть. Я пока с таким не сталкивался. Обычно всё работает правильно. Видимо бывают исключения.
Денис, вы — гений! Я вас просто обожаю. Пыталась я раньше делать, но не получилось. А вот ваша статья все разложила по полочкам! Спасибо. Вот как получилось: tatiananova.ru
Да нет, я обычный парень! Что-то не увидел я на Вашем сайте уголка!
Денис, вы меня огорчили! Не может же быть, что только я его вижу? Не могли бы глянуть еще раз? Я и в хроме его вижу, и в мозилле: http: //tatiananova.ru
Не огорчайтесь! Всё работает, просто у меня блокировщик рекламы в браузере на работе стоит и он уголок Ваш блокирует так как он сделан на флеше!
Уф! Я же говорила, что вы — гений. Спасибо вам и всяческих успехов!
Пожалуйста! Обращайтесь!
Денис, полезная статья и скрипт,за 5 минут по вашей статье разместил скрипт на своем блоге nemyzhik.ru?, все работает, картинки правда подгонять надо, но это мелочь.
Денис, очень интересно, а как реализована страница подписки у вас на сайте, которая открывается по щелчку на флеш банере, было б очень интересно почитать об этом статью или был бы благодарен за любую информацию по этой теме
Спасибо, Семён! Такая статья есть,в разделе CSS!
Это просто чудесно, обязательно прочту
Да, мне тоже всегда это нравилось!
Здравствуй Денис. Отличная инструкция, но вы не задумывались о том, что влеш баннеры не отображаются на мобильных устройствах! Это наверно единственная причина тому, что скорей всего я на сделаю у себя на блоге флеш баннер. А как же мне этого хотелось
Баннер красивый НО:
— Эффективность нулевая в плане ctr. Не кликает народ на эту тему. Самый эффективный это поп-ап баннер.
— Из-за флэша не поддерживается в мобильных устройствах и яблочной продукции.
— В коде флеша, а именно в large.swf прописан
getURL (_root.ad_url, «_blank»); ваша ссылка будет открываться в новых вкладках, а если нужен просто переход внутри сайта?
— fla исходников нет, не отредактировать эту строчку на _self. Декомпиляторы не качественно кодируют, пытаться взломать бесполезно(.
-В некоторых IE не работает.
Читал ваш блог и мне очень понравилась эта статья! Я всегда интересовался тем, как создать угловой flash баннер для своего сайта, и ваши пошаговые инструкции в точности описывают процесс. Особенно хорошо, что вы подчеркиваете преимущества такого баннера перед другими формами рекламы. Я уже полон идей, как использовать его на своем сайте. Спасибо за познавательную статью! Жду с нетерпением новых полезных рекомендаций от вас.
не отдают должное значение flash-технологии, считая её устаревшей и непрактичной. Однако, я считаю, что угловой flash баннер – это отличный способ сделать сайт более интерактивным и привлекательным. Он добавляет сайту некий шарм и делает его более запоминающимся для посетителей. К тому же, создание такого баннера отнюдь не сложно, а результат может быть действительно впечатляющим. Я рекомендую попробовать добавить угловой flash баннер на свой сайт и посмотреть, как он будет влиять на посетителей. Уверен, Вы останетесь довольны результатом!
пользователи предпочитают использовать альтернативные технологии вместо flash из-за проблем совместимости и безопасности. Тем не менее, для тех, кто все еще выбирает flash, этот угловой баннер может быть хорошим решением. Он привлекателен и не мешает нормальному чтению страницы. Кроме того, возможность добавления разной информации внутрь баннера делает его гибким инструментом для рекламы и маркетинга. Но не забывайте о том, что не все пользователи могут видеть flash-контент, поэтому лучше предоставить альтернативные варианты для тех, кто не может его просмотреть. В целом, угловой flash баннер – интересное решение для улучшения пользовательского опыта, но не стоит полностью полагаться только на него.