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

Регистрация доменов
Домен RU - 99 руб
Домен РФ - 99 руб
www.

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

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

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

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

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

<a href="http://www.rotapost.ru/?a=qujuwi">
<img src="_http://www.rotapost.ru/i/gif/rotapost_468x60_1.gif" alt="RotaPost - Эффективная реклама в блогах" width="468px" height="60px" />
</a>

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

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

style="position:absolute;top:93px;right:200px; border: 1px solid #ddad22;"
Вставить её нужно после тэга <img и у нас должно получиться примерно вот так:

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

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

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

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

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

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

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

rel="nofollow" target="_blank"
Получится примерно вот так:

как разместить баннер

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

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

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

.ads {float: right; margin-top: 65px; margin-right: 10px; }
Теперь открываем знакомый нам файл header.php и ищем там строку <div id="header">

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

<div class="ads"><div>
После этого вставляем код нашего баннера и после него ещё два закрывающих тэга:

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

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

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


Понравилась ИГРА? Возьми КОД, поставь себе на сайт и улучши поведенческие факторы!


5 комментариев
  1. Вы наверное имели в виду баннер в шапке сайта на wordpress?
    Могу с уверенностью сказать, что на движке lifestreet такое не прокатит.

    • Ну да, там в начале так и написано, что на wordpress. C livestreet знаком, даже хочу потом сюда установить в качестве форума. Да, там структура движка другая, но думаю и там можно сделать подобное.

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

  2. Большое спасибо автору этого сайта))). По вашей схеме установил баннер в шапку сайта куда надо!

    • Да не за что, сам себе просто делал, вот и решил задокументировать, а то потом забуду. Рад, что смог помочь.

Написать комментарий

Опубликовано © Блокнот вебмастера

СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

1. Epayments - можно открыть счет в долларах, евро и рублях. Формально банка нет, юридический адрес в Лондоне, но можно получить реквизиты банка в Латвии.

2. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

3. OkPay - Офшорная компания зарегистрирована на Британских Виргинских островах, можно открыть счет в долларах, евро и рублях.

4. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.

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