Баннер в шапке сайта

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

Иногда в шапке сайта есть много свободного места, которое можно использовать с пользой для себя. Можно сделать в шапке рекламное место. Вставив в то место баннер, можно и заработать на нём. Как это сделать… Для новичков объясню подробно. Рассмотрим пример установки баннера на этом сайте.

Код баннера выглядит так:

Этот код надо немного переделать. Код, который необходимо вставить в шапку, в общем выглядит так:

Выделенная часть — это и есть то, что надо добавить в код баннера.  Рассмотрим, что в этом дополнении находится и и для чего это надо.

• position:absolute — это говорит о том, что расположение баннера прозрачное
• top:50px — это расположение баннера относительно верхнего края шапки сайта. При увеличении или уменьшении этого значения, баннер будет передвигаться вниз или вверх.
• right:300px — это расположение баннера относительно правого края шапки сайта. Изменяя этот размер, соответственно баннер передвигается влево или вправо
• border: 1px — это величина обводки баннера. Если Вам нужна обводка побольше, то увеличьте значение, а если обводка не нужна, то просто поставьте ноль.
• solid #ddad22 — выполняет функцию цвета обводки. Изменяя цветовой код, можно менять цвет обводки баннера.

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

Теперь будем вставлять этот код в шапку сайта. Для этого надо пройти по пути: панель инструментов —> редактор —> заголовок (header.php). Теперь надо найти место, куда вставить баннер. Открыв файл header.php, мы видим кучу кракозябров. Куда вставлять? Обычно пишут, что надо вставлять в районе тегов с названием сайта. Надо сделать поправку на то, что почти каждый шаблон wordpress имеет свою особенность. Я в своём шаблоне таких кракозябров не нашел. Для эксперимента, я вставил этот код перед тегом </head>. Сработало! Изменяя вышеописанные величины кода, я добился нужного расположения баннера в шапке. Чего и вам желаю!!! Не бойтесь экспериментов!

Хочу внести в статью немного дополнения. Столкнулся с таким случаем, что поменяв свой шаблон сайта на другой, я не смог вставить баннер в шапку сайта вышеизложенным способом. Причиной оказалось, что шапка на новом шаблоне была в виде целой картинки. Тут пришлось покопаться в интернете. Решение было найдено (простое), хотя объяснения были очень замудрённые!

Если у Вас шаблон сайта имеет шапку в виде цельной картинки, то изменения в вышеописанном коде будут минимальные. Я не буду описывать что, почему и для чего, но проблема решилась заменой в коде атрибута position:absolute на position:relative. Теперь код у меня стал выглядеть так:

Никак не мог выставить баннер на своё место. Обратите внимание на атрибут top, выделенный зелёным цветом. Только при этом отрицательном значении баннер встал на своё место. Так что при установке пробуйте разные значения top.

P.S. У многих, после составления кода для своего баннера, ничего не работает. Причина этого очень простая. Если Вы копируете какие-то части кода с сайтов, то особое внимание обращайте на форму кавычек!!! Они могут отличаться. Кавычки в скопированном коде имеют не такую форму как в визуальном редакторе сайта. Если установленный код не работает, то в первую очередь смотрите на кавычки в коде и если они отличаются формой, то удалите и поставьте новые с редактора.