Как вставить баннер

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

Сначала рассмотрим вставку баннера на сайт, сверстанный на чистом HTML+CSS. Скопируйте готовый код элемента с сайта рекламодателя и отредактируйте его согласно общим правилам форматирования. Для внесения исправлений используйте копию страницы своего сайта, никогда не делайте правки сразу на сервере. Код баннера представляет собой стандартную html-разметку со стилями, расположенными внутри тегов. Они должны находиться в отдельных файлах и быть связаны друг с другом селекторами.

Особое внимание уделите проверке уникальности классов и id в коде проекта. Никакие другие элементы не должны влиять на отображение баннера. Убедитесь, что названия селекторов не пересекаются, с помощью поиска в привычном для вас редакторе файлов (обычно вызывается по нажатию Ctrl+F).

Посмотрите, нет ли в коде подозрительных элементов. Простейший баннер состоит из двух тегов: <a> и <img>. Желательно, чтобы они находились внутри блока <div> или <iframe>. Иногда в рекламных вставках встречаются устаревшие теги, их использование приводит к тому, что сайт не пройдет проверку на валидность. А это может негативно сказаться на продвижении проекта.

Затем проведите ревизию атрибутов в тегах. Если видите что-либо необычное, выясните назначение этого элемента в справочнике. Обязательным атрибутом для тега ссылки <a> является href – адрес, по которому ведет баннер. Часто используется title – подпись для линка, а также target – указание открывать рекламу на новой странице или вкладке. За размещение изображений отвечает тег <img>. Он всегда содержит атрибут src – указание относительного или абсолютного пути до картинки. Также внутри <img> могут использоваться подсказки title и alt.

Запустите измененную копию страницы в браузере. Посмотрите, как отображается баннер в разных веб-обозревателях. Попробуйте изменить размер и масштаб окна. Если реклама расположена правильно и по нажатию на нее происходит переход на нужный сайт, сохраните код в редакторе.

Далее целиком замените оригинальную страницу только что сделанным дубликатом с рекламой. Для этого удобнее всего воспользоваться ftp-клиентом, например, бесплатной и кроссбраузерной программой FileZilla. Просто перетащите новый файл в правильный раздел каталога. Название дубликата должно совпадать с оригиналом, чтобы не нарушить структуру ссылок на сайте. При одинаковых названиях ftp-клиент предложит заменить страницу более новой. После этого перезагрузите свой сайт и еще раз убедитесь, что баннер правильно отображается.

Если ваш сайт или блог работает на популярной CMS WordPress, зайдите в консоль управления интернет-ресурсом. На боковой панели найдите раздел «Внешний вид» и выберите пункт «Виджеты».

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

Размещение баннеров — простой способ заработка на своем сайте. Вставить такую рекламу вы сумеете всего за несколько минут. Но будьте внимательны к тому коду, который вы добавляете в свой проект.