Как сделать угловой 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 баннера?

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

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

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

Оставить свой комментарий
  1. blogrub

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

    1. Денис Черников

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

  2. Алексей

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

    1. Денис Черников

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

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

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

    1. Денис Черников

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

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

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

        1. Денис Черников

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

  4. Ольга

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

    1. Денис Черников

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

  5. Юлия

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

    1. Денис Черников

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

  6. Олег

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

    1. Денис Черников

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

  7. Таисия

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

    1. Денис Черников

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

  8. Владимир

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

    1. Денис Черников

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

      1. Владимир

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

        1. Денис Черников

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

  9. Ден

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

    1. Денис Черников

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

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

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

    1. Денис Черников

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

  11. Сергей

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

    1. Денис Черников

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

  12. Сергей

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

    1. Денис Черников

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

  13. Георгий

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

    1. Денис Черников

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

  14. Наталья

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

    1. Денис Черников

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

      1. Наталья

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

        1. Денис Черников

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

  15. Максим

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

    1. Денис Черников

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

  16. Евгений

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

    1. Денис Черников

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

  17. Евгений

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

    1. Денис Черников

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

  18. Alex-iHerb

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

    1. Денис Черников

      Пожалуйста, Alex-iHerb!Спасибо, за пожелания! Заходите ещё!

  19. Александр

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

    1. Денис Черников

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

  20. Александр

    Спасибо за быстрый ответ!
    Поле поиска сносить нужно однозначно!
    Я думаю мой случай не единичный, я имею в виду слои и верстать…
    Может подскажешь хотя бы в каком направлении копать…а там глядишь и сами докумекаем…
    Думаю не только мне эта инфа пригодится…

    1. Денис Черников

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

  21. Евгения

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

    1. Денис Черников

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

  22. Татьяна

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

    1. Денис Черников

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

  23. Татьяна

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

    1. Денис Черников

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

  24. Татьяна

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

    1. Денис Черников

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

  25. Семен

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

    1. Денис Черников

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

      1. Семен

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

        1. Денис Черников

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

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

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

  27. Jim

    Баннер красивый НО:
    — Эффективность нулевая в плане ctr. Не кликает народ на эту тему. Самый эффективный это поп-ап баннер.
    — Из-за флэша не поддерживается в мобильных устройствах и яблочной продукции.
    — В коде флеша, а именно в large.swf прописан
    getURL (_root.ad_url, «_blank»); ваша ссылка будет открываться в новых вкладках, а если нужен просто переход внутри сайта?
    — fla исходников нет, не отредактировать эту строчку на _self. Декомпиляторы не качественно кодируют, пытаться взломать бесполезно(.
    -В некоторых IE не работает.

  28. Макс

    Читал ваш блог и мне очень понравилась эта статья! Я всегда интересовался тем, как создать угловой flash баннер для своего сайта, и ваши пошаговые инструкции в точности описывают процесс. Особенно хорошо, что вы подчеркиваете преимущества такого баннера перед другими формами рекламы. Я уже полон идей, как использовать его на своем сайте. Спасибо за познавательную статью! Жду с нетерпением новых полезных рекомендаций от вас.

  29. Вебмастер

    не отдают должное значение flash-технологии, считая её устаревшей и непрактичной. Однако, я считаю, что угловой flash баннер – это отличный способ сделать сайт более интерактивным и привлекательным. Он добавляет сайту некий шарм и делает его более запоминающимся для посетителей. К тому же, создание такого баннера отнюдь не сложно, а результат может быть действительно впечатляющим. Я рекомендую попробовать добавить угловой flash баннер на свой сайт и посмотреть, как он будет влиять на посетителей. Уверен, Вы останетесь довольны результатом!

  30. Вебмастер

    пользователи предпочитают использовать альтернативные технологии вместо flash из-за проблем совместимости и безопасности. Тем не менее, для тех, кто все еще выбирает flash, этот угловой баннер может быть хорошим решением. Он привлекателен и не мешает нормальному чтению страницы. Кроме того, возможность добавления разной информации внутрь баннера делает его гибким инструментом для рекламы и маркетинга. Но не забывайте о том, что не все пользователи могут видеть flash-контент, поэтому лучше предоставить альтернативные варианты для тех, кто не может его просмотреть. В целом, угловой flash баннер – интересное решение для улучшения пользовательского опыта, но не стоит полностью полагаться только на него.

Ваш комментарий

Обязательные поля помечены *

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

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

Доброго времени суток, всем читателям – Sozdaiblog.ru! В этой статье я расскажу, как сделать...

Подробнее

Что будем искать? Например, Кредит

Create a Mobile Website
View Site in Mobile | Classic
Share by: