> ## Content Index > Fetch the complete content index at: https://blog.themarfa.name/llms.txt > Use this file to discover other available public pages before exploring further. # Обзор bannersnack. Как создать красивый HTML5 баннер - URL: https://blog.themarfa.name/obzor-bannersnack-kak-sozdat-krasivyi-html5-banner/ - Published: 2015-11-15T22:17:01.000Z - Updated: 2018-08-22T07:46:25.000Z - Author: Константин Докучаев - Tags: Обзор, Для сайта, bannersnack Интернет заполонён рекламой. На многих сайтах это вырвиглазная реклама щёток для похудения, на других это Яндекс.Директ или Google AdSense. И лишь на некоторых можно увидеть красивые баннеры, которые не раздражают пользователей одним своим видом. Из моего обзора вы узнаете, как самостоятельно создать красивый HTML5-баннер без каких-либо начальных навыков. ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/58f0179b-3012-4dd6-952f-404c5e3a3be3.png) [bannersnack](http://www.bannersnack.com/ "bannersnack") – онлайн-сервис для создания HTML5 и Flash-баннеров разнообразного формата, не требующий знания кода и навыков работы с редакторами изображений. Сервис предлагает создать баннеры двух типов: обычный или случайный баннер при загрузке страницы. Также при помощи banersnack можно запустить свою рекламную кампанию в Google или Facebook. Но обо всём по порядку. ### Banner maker Именно в этом разделе вы можете создать свой первый баннер. Сервис предлагает баннеры в формате HTML5 или Flash. Поскольку Flash все стараются "убить", я опишу редактор HTML5. При запуске мастера сразу же предлагаются несколько готовых шаблонов: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/2ccd624e-9126-463b-a7cc-cf32f47a0c2f.png) Конечно же, возможность создать баннер с нуля никуда не исчезает. Вверху мастера указывается размер будущего баннера: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/c383a9ef-44e8-4f85-a615-91d702fa8586.png) При выборе размера поменяются и шаблоны. Лучше всего отдать предпочтение предустановленному размеру, а не указывать свой, так как в конечном итоге bannersnack может отказаться генерировать такой баннер. При создании своего баннера открывается вот такой редактор: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/12596de5-a989-4bef-8ebb-3a11bd92c334.png) Слева список всех слайдов баннера, на каждом из которых будет своя картинка и текст. Вверху инструменты для создания баннера, а справа свойства слоя. В качестве баннера можно добавить свою картинку, текст, кнопку, фигуру или видео. Я добавил картинку и кнопку: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/fe4fcf88-d844-42f0-b219-323d620e302d.png) При выборе любого элемента будет предложено несколько шаблонов, но, как всегда, последнее слово за вами: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/ecfb08f3-d0fd-4dff-8847-802e8ac7fd79.png) У каждого слоя есть три вкладки свойств. Положение на странице, цвет, форма и тому подобное: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/e79dc66f-1b90-451f-8bb6-24491393bc06.png) Действие по клику на слое: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/87d45bc3-299f-4021-918f-91e6599550b1.png) Можно указать переход к следующему слайду или переход по ссылке. Свойства анимации при смене слайда: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/c2201798-d2f6-4241-b172-af6842f4ec7a.png) Когда вы закончили редактировать свой баннер, просто нажмите Save и выберите имя будущего баннера: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/af01601a-d28b-4ab9-9453-7589c9121318.png) Затем откроется список всех ваших баннеров с кодами для вставки на сайт: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/d43e440f-48c4-40d3-a37e-03a58f8de600.png) Важно отметить, что при изменении баннера на сайте bannersnack, он также обновится и на вашем сайте. Копировать код вставки заново не нужно. ### Banner rotator Здесь создаются статичные баннеры, которые загружаются в случайном порядке при загрузке страницы. Мастер предлагает выбрать из уже созданных баннеров или создать новый: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/44da5748-58f4-42f1-994a-ca6ae1763b3a.png) При добавлении своей картинки можно задать лишь URL перехода: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/275c9e7b-97be-456f-8078-a1a4d5e9ad32.png) После чего остается опять же получить код вставки на сайт: ![](https://storage.ghost.io/c/71/cf/71cf070c-b8aa-467e-9efd-cf18f7dcf253/content/images/2015/12/5d71efad-9e5f-444f-a562-ab529eabc8e4.png) Вот так при помощи [bannersnack](http://www.bannersnack.com/ "bannersnack") даже неопытный пользователь может создать свой красивый кросс-браузерный баннер. [Попробовать bannersnack](http://www.bannersnack.com/ "bannersnack").