Как разместить баннер в шапке сайта?

Если честно, то до сегодняшнего дня я искренне полагал, что разместить баннер в шапке сайта достаточно сложно. Но оказалось, что делается это очень просто и для этого даже есть не один способ. Итак, как же просто добавить баннер в шапку сайта и самое главное, выровнять его относительно краёв, чтобы он смотрелся красиво?

Представим себе, что мы хотим добавить баннер партнёрской программы биржи ссылок Rotapost. Если вы ещё не зарегистрированы на этой бирже, то сделайте это скорее, так как там принимают сайты даже с нулевыми показателями и дневники, находящиеся на бесплатных блогоплатформах, типа liveinternet.ru и livejournal.com - зарегистрироваться!

Заходим в раздел "Мой аккаунт" - "Партнёрская программа". Выбираем первый баннер 468х60.

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

Итак, нам нужно немного преобразовать тот код, который нам предлагают:

1. Как разместить баннер в шапке сайта самым простым способом.

В этот код нам нужно вписать одну строчку:

Вставить её нужно после тэга <img и у нас должно получиться примерно вот так:

Теперь этот код нам нужно вставить в файл header.php, который находится в папке с вашей темой (Напомню, мы работаем с CMS WordPress. В других CMS делается по этому образу и подобию). Вставляем код в этом файле после вот такого кода:

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

После добавления кода у вас в шапке сайта появится баннер. Осталось только настроить его позицию, у каждого сайта она будет своя. Для этого нужно "побаловаться"  с двумя цифрами: цифра после тэга "top" показывает расстояние от верха. С этим параметром нужно быть внимательным, так как лично у меня баннер занимал разное положение в зависимости от того, залогинился я, или нет. Поэтому нужно  на время отлогиниться и потом визуально настраивать положение баннера. Цифра после тэга "right" показывает расстояние от правого края. В bolder прописывается ширина рамки ( в данном случае это 1px и цвет этой рамки #ddad22, который можно изменить на свой) На этом настройка почти закончена.

Есть ещё один совет: закрыть ссылку от индексирования и сделать так, чтобы при клике по баннеру, он открывался в новом окне. Первое делается для того, чтобы PR ваших страниц не утекал в Rotapost.ru (они и так на нас зарабатывают),  а второе для того, чтобы вы не теряли посетителя, который кликнет по баннеру. Сделать это очень просто, нужно всего лишь вставить в код баннера вот такую строчку:

Получится примерно вот так:

Вот казалось бы и всё, но у меня на этом мучения не закончились. Оказалось, что мой шаблон какой-то хитрый, и добавление тэга style="position:absolute; в код баннера делает его не кликабельным. Но есть другой, более сложный, но более эффективный способ  разместить баннер в шапке сайта.

2. Как разместить баннер в шапке сайта используя style.css

Первое, что делаем - это ищем в файлах нашей темы файл style.css Лично у меня тема поддерживает несколько расцветок, поэтому у меня на каждый свой цвет шаблона есть в папке css свой файл style.css Именно в него я и добавил вот такой код, в самый конец файла:

Теперь открываем знакомый нам файл header.php и ищем там строку <div id="header">

Сразу после нее вставляем код, который будет указывать секцию, которую мы вставили в style.css

После этого вставляем код нашего баннера и после него ещё два закрывающих тэга:

У нас должно получиться примерно вот так:

Вот такими двумя способами можно разместить баннер в шапке сайта. Если это вам как-то помогло, то я очень рад!

Начало » Для вебмастеров » Как разместить баннер в шапке сайта?

Понравилась красная кнопка? Возьми КОД и поставь себе на сайт:)