ГлавнаяДизайн блога › Как сделать угловой flash баннер для сайта?


Как сделать угловой flash баннер для сайта?


угловой flash баннер для сайта

Доброго времени суток, всем читателям – 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 баннера?

На сегодня это всё. Я надеюсь, что Вам понравился угловой флеш баннер и повествующая о нём статья.

До следующих статей…

 

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




60 комментариевА что думаете Вы?

  1. blogrub

    Сколько на блогах видел, смотрел но не когда не кликал :)

    [Ответить]

    Денис Черников ответил:

    А Вы попробуйте, может там что-то полезное для Вас будет!

    [Ответить]

  2. Алексей

    Я себе как-то поставил, но потом убрал. Увеличения кликов не заметил, а вот на скорость загрузки сайта заметно повлияло

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Марина Антонова

    Спасибо за еще одну полезность.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Марина! Надеюсь, что Вы разобрались с установкой!

    [Ответить]

    Марина Антонова ответил:

    Пока нет, но после выходных займусь этим в плотную.

    [Ответить]

    Денис Черников ответил:

    Правильно, Марина! Выходные нужны для отдыха, а я вот уже забыл, что такое отдых!(

    [Ответить]

  4. Ольга

    Я думала о создании такого уголка, но пока руки не доходят.

    [Ответить]

    Денис Черников ответил:

    Вот, теперь есть повод!

    [Ответить]

  5. Юлия

    Кажется есть плагин с таким же эффектом?

    [Ответить]

    Денис Черников ответил:

    Юлия, Вы чего так боитесь с кодом поиграться? Забудьте Вы эти плагины, научитесь обходиться без них!

    [Ответить]

  6. Олег

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

    [Ответить]

    Денис Черников ответил:

    Привет, Олег! Вы правы на счёт плагина, от него то и будет скорость падать, а тут подумаешь маленький скриптик, хуже не станет, уверяю!

    [Ответить]

  7. Таисия

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Владимир

    Спасибо, Денис, что поделился столь ценной инфой. Давно хотел сделать такое на своем сайте. Обязательно буду применять! Радуй и дальше нас своими «фишками» по улучшению дизайна сайтов.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Владимир!

    По мере возможности, буду стараться преподносить новые сюрпризы, но и Вы меня не забывайте, почаще заглядывайте в гости!

    [Ответить]

    Владимир ответил:

    Да,Денис! Всегда посещаю твой сайт! Тем более подписался на рассылку. Просто на 3 недели уезжал.

    [Ответить]

    Денис Черников ответил:

    Главное, что вернулись!

    [Ответить]

  9. Ден

    Попробую сделать, надеюсь, что получится

    [Ответить]

    Денис Черников ответил:

    Если что, спросите! Чем смогу подмогну!

    [Ответить]

  10. Тимур шакиров

    Денис , Здравствуйте я заменил картинки но large.jpeg но стоят те что как бы по умолчанию !? намекните что не так.

    С уважением.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Сергей

    Красиво конечно, но у меня на скорость загрузки влияет, я его удалил. А как у вас Денис, не проверяли?

    [Ответить]

    Денис Черников ответил:

    У меня нормально, может и влияет, но я этого не ощущаю! Скорость загрузки сайта менее секунды.

    [Ответить]

  12. Сергей

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, странно, что у Вас есть с этим проблемы!

    [Ответить]

  13. Георгий

    И уголок работает, только как-то быстро переключает на ссылку, даже мышкой ничего ещё не делаю. Зашёл сюда по поиску увеличения фотографий, а много полезного нашёл, спасибо тебе, Денис.

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Георгий! Тут много всего интересного!

    [Ответить]

  14. Наталья

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

    [Ответить]

    Денис Черников ответил:

    Какого именно тега у Вас нет в хедере?

    [Ответить]

    Наталья ответил:

    вот этого конечно и нет

    [Ответить]

    Денис Черников ответил:

    Ставьте после открывающего. Разницы нет ни какой!

    [Ответить]

  15. Максим

    Примеров не хватает на сайте

    [Ответить]

    Денис Черников ответил:

    Может Вы свой предложите?

    [Ответить]

  16. Евгений

    Здравствуйте Денис поставил угловой банер,поменял картинки,но при отворачивании страницы картинка отображается не вся а как бы урезанная со всех сторон.Не подскажете что еще нужно подредактировать чтобы исправить ошибку. Ширину и высоту открывания углового банера пробовал сделать больше,изображение тоже увеличивается но все равно обрезанное.А вообще прикольная штука сбасибо огромное.

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Евгений! Здесь только редактировать саму картинку необходимо. Я в своё время долго бился, пока не подогнал под нужный размер.

    [Ответить]

  17. Евгений

    Ок спасибо,буду пробовать о результатах отпишусь.

    [Ответить]

    Денис Черников ответил:

    Хорошо, занимайтесь!

    [Ответить]

  18. Alex-iHerb

    спасибо Денис...давно хотел такую штуку внедрить на одном своем блоге, сделал за полчаса с учетом работы в фотошопе с файликами small.jpg и large.jpg...всё заработало с первого раза!!!..успехов во всем!!!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Alex-iHerb!

    Спасибо, за пожелания! Заходите ещё!

    [Ответить]

  19. Александр

    Здравствуй Денис!

    Поставил баннер по твоему руководству, он встал, только коряво — его загораживает изображение заголовка, и поле «поиска по сайту», которое вообще было бы не плохо удалить. Не подскажешь как со всем этим бороться.

    Заранее спасибо.

    [Ответить]

    Денис Черников ответил:

    Привет, Александр!

    Загораживает потому-что баннер ниже по уровню слоёв лежит, там верстать нужно и или его поднимать над поиском или поиск сносить. Короче, это верстать нужно.

    [Ответить]

  20. Александр

    Спасибо за быстрый ответ!

    Поле поиска сносить нужно однозначно!

    Я думаю мой случай не единичный, я имею в виду слои и верстать...

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

    Думаю не только мне эта инфа пригодится...

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Александр!

    Есть такая тема, вот к примеру видео может наезжать на некоторые элементы (окна, баннеры и т.д.) Чтобы такого не происходило в видюшный код добавляют правило value="opaque". Это его приземляет и оно расценивается браузерами, как обычная картинка и видео перестаёт наезжать на другие элементы. Идите в этом направлении!

    [Ответить]

  21. Евгения

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Евгения!

    Вообще должно работать везде. Возможно, что-то с чем то не контачит, нужно смотреть. Я пока с таким не сталкивался. Обычно всё работает правильно. Видимо бывают исключения.

    [Ответить]

  22. Татьяна

    Денис, вы — гений! Я вас просто обожаю. Пыталась я раньше делать, но не получилось. А вот ваша статья все разложила по полочкам! Спасибо. Вот как получилось: tatiananova.ru

    [Ответить]

    Денис Черников ответил:

    Да нет, я обычный парень! Что-то не увидел я на Вашем сайте уголка!

    [Ответить]

  23. Татьяна

    Денис, вы меня огорчили! Не может же быть, что только я его вижу? Не могли бы глянуть еще раз? Я и в хроме его вижу, и в мозилле: http: //tatiananova.ru

    [Ответить]

    Денис Черников ответил:

    Не огорчайтесь! Всё работает, просто у меня блокировщик рекламы в браузере на работе стоит и он уголок Ваш блокирует так как он сделан на флеше!

    [Ответить]

  24. Татьяна

    Уф! Я же говорила, что вы — гений. Спасибо вам и всяческих успехов!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Обращайтесь!

    [Ответить]

  25. Семен

    Денис, полезная статья и скрипт,за 5 минут по вашей статье разместил скрипт на своем блоге nemyzhik.ru?, все работает, картинки правда подгонять надо, но это мелочь.

    Денис, очень интересно, а как реализована страница подписки у вас на сайте, которая открывается по щелчку на флеш банере, было б очень интересно почитать об этом статью или был бы благодарен за любую информацию по этой теме

    [Ответить]

    Денис Черников ответил:

    Спасибо, Семён! Такая статья есть,в разделе CSS!

    [Ответить]

    Семен ответил:

    Это просто чудесно, обязательно прочту

    [Ответить]

    Денис Черников ответил:

    Да, мне тоже всегда это нравилось!

    [Ответить]

  26. Игорь Черноморец

    Здравствуй Денис. Отличная инструкция, но вы не задумывались о том, что влеш баннеры не отображаются на мобильных устройствах! Это наверно единственная причина тому, что скорей всего я на сделаю у себя на блоге флеш баннер. А как же мне этого хотелось

    [Ответить]

  27. Jim

    Баннер красивый НО:

    — Эффективность нулевая в плане ctr. Не кликает народ на эту тему. Самый эффективный это поп-ап баннер.

    — Из-за флэша не поддерживается в мобильных устройствах и яблочной продукции.

    — В коде флеша, а именно в large.swf прописан

    getURL (_root.ad_url, «_blank»); ваша ссылка будет открываться в новых вкладках, а если нужен просто переход внутри сайта?

    — fla исходников нет, не отредактировать эту строчку на _self. Декомпиляторы не качественно кодируют, пытаться взломать бесполезно (.

    -В некоторых IE не работает.

    [Ответить]

Оставить комментарий!

Вверх