Sozdaiblog.ru
Назад

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

Опубликовано: 15.09.2012
Время на чтение: 7 мин
60
12

угловой 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 баннера?

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

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

 

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

Поделиться
Похожие записи
Комментарии:
  • blogrub
    Опубликовано: 16.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.09.2012 Ответить на сообщение

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

  • Алексей
    Опубликовано: 16.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.09.2012 Ответить на сообщение

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

  • Марина Антонова
    Опубликовано: 16.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.09.2012 Ответить на сообщение

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

      • Марина Антонова
        Опубликовано: 16.09.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 16.09.2012 Ответить на сообщение

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

  • Ольга
    Опубликовано: 16.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.09.2012 Ответить на сообщение

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

  • Юлия
    Опубликовано: 16.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.09.2012 Ответить на сообщение

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

  • Олег
    Опубликовано: 16.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.09.2012 Ответить на сообщение

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

  • Таисия
    Опубликовано: 18.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 19.09.2012 Ответить на сообщение

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

  • Владимир
    Опубликовано: 28.09.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.09.2012 Ответить на сообщение

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

      • Владимир
        Опубликовано: 01.10.2012 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 01.10.2012 Ответить на сообщение

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

  • Ден
    Опубликовано: 10.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 10.10.2012 Ответить на сообщение

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

  • Тимур шакиров
    Опубликовано: 27.10.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.10.2012 Ответить на сообщение

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

  • Сергей
    Опубликовано: 19.11.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 19.11.2012 Ответить на сообщение

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

  • Сергей
    Опубликовано: 19.11.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 19.11.2012 Ответить на сообщение

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

  • Георгий
    Опубликовано: 26.11.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 26.11.2012 Ответить на сообщение

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

  • Наталья
    Опубликовано: 28.11.2012 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 28.11.2012 Ответить на сообщение

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

      • Наталья
        Опубликовано: 08.01.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 08.01.2013 Ответить на сообщение

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

  • Максим
    Опубликовано: 07.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 07.01.2013 Ответить на сообщение

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

  • Евгений
    Опубликовано: 07.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 07.06.2013 Ответить на сообщение

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

  • Евгений
    Опубликовано: 07.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 07.06.2013 Ответить на сообщение

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

  • Alex-iHerb
    Опубликовано: 20.07.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.07.2013 Ответить на сообщение

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

  • Александр
    Опубликовано: 13.08.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 13.08.2013 Ответить на сообщение

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

  • Александр
    Опубликовано: 13.08.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 13.08.2013 Ответить на сообщение

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

  • Евгения
    Опубликовано: 16.08.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 16.08.2013 Ответить на сообщение

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

  • Татьяна
    Опубликовано: 20.01.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

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

  • Татьяна
    Опубликовано: 20.01.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

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

  • Татьяна
    Опубликовано: 20.01.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 20.01.2014 Ответить на сообщение

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

  • Семен
    Опубликовано: 11.10.2014 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 11.10.2014 Ответить на сообщение

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

      • Семен
        Опубликовано: 11.10.2014 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 15.10.2014 Ответить на сообщение

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

  • Игорь Черноморец
    Опубликовано: 19.06.2015 Ответить на сообщение

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

  • Jim
    Опубликовано: 03.08.2015 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.