место под рекламуУрок №41

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

Когда я только начинал работать с блогами, я столкнулся с проблемой, все рассказывали только о том, как вставить свой баннер на сайт, и никто не мог показать — как установить код рекламы в баннер. И поэтому я расскажу о размещении двух видов баннеров:

  • обычный баннер;
  • баннер в виде кода от партнёрки.

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

Сперва нам нужно обзавестись этим баннером. Как правило его предоставляет рекламодатель, ну или вы делаете сами или заказываете у фрилансеров. Сперва я расскажу как добавить баннер в виде кода. Для этого копируем необходимый код в буфер обмена. Затем идём в раздел — Внешний вид — Виджеты. Здесь перетаскиваете в право, в сайдбар, виджет под названием — Текст(произвольный текст или HTML-код). Даём своё название блоку и вставляем код баннера. Жмём сохранить.

Код в сайдбареИ что же мы увидим ?

баннер на месте

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

Тут нам понадобятся вспомогательные элементы html. И в этом я вам помогу. Поскольку шапка сайта серьёзное место и не терпит дилетантов. Перед началом работы сделайте резервное копирование блога. И приступим. Сперва мы берём наш код и оборачиваем его в <div>. Выглядит это так:

<div class="banner1">Код баннера</div>

Что тут для чего не буду в даваться в подробности, скажу только, что мы присвоили баннеру имя — banner1. Теперь при помощи FTP-соединения открываем файл heder.php. И вставляем наш код в желаемое место.

Баннер в шапке

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

куда попал баннер

Это место меня не устраивает. Теперь будим его подгонять. Для этого открываем файл style.css. И в самый низ вставляем этот код:

.banner1 {float: left;margin: 0px 0px 0px 20px
 }

координаты баннера

Как вы наверное догадались, цифрами мы будим задавать координаты размещения баннера.

  • первая цифра — по вертикали;
  • четвёртая  цифра — по горизонтали.

Ну тут вы сами побалуетесь. У себя я задал координаты — margin: 120px 0px 0px 443px. И вот что получилось:

баннер встал

Вот и всё, что касается размещения кода рекламы в шапке сайта.

Размещение баннера в виде картинки

Теперь, если баннером является обычное изображение, то вам необходимо его загрузить как обычный медиафайл на свой блог. Надеюсь это вы уже умеете, если нет, то читаем мой урок — как добавить картинку на сайт. После добавления картинки, у неё появляется собственная ссылка. Это будит являться адресом вашего баннера, как бы код. Этот адрес используете для размещения баннера.

ссылка

Теперь ваш адрес нужно опять же обернуть в специальный код.

<a href="http://ваш сайт" target="_blank"><img src=«ваша ссылка на картинку»></a>

Вот как получилось у меня :

<a href="http://klinikinfo.ru" target="_blank"><img src="http://klinikinfo.ru/wp-content/uploads/ban.jpg"></a>

Если вы хотите вставить баннер в сайдбар или на страницу, то этого кода достаточно. Но если вы его будите ставить в heder или footer, так что бы задать координаты, то придётся его обернуть, так как мы это делали выше:

<div class="banner1"><a href="http://ваш сайт" target="_blank"><img src=" ваша ссылка на картинку "></a></div>

И добавить в css стиле :

.banner1 {float: left;margin: 0px 0px 0px 20px
 }

Вот вроде и всё. Если я смог вам помочь, ставьте лайк и твит. В следующем уроке, я покажу самую эффективную защиту от взлома.

Комментариев: 15

  1. Евгений

    пробую установить баннер в виде картинки. Появляется под логотипом. Вставляю код в CSS, изменяю данные, но ничего не происходит.Остается в том же положении

  2. Александр

    Спасибо!!! Установил в шапке своего молодого сайтика форму перехода на мой канал ютуб. Первый раз копался в редакторе, да еще и восстанавливаться не понадобилось. Это же надо!!! СПАСИБО. ваш сайт в закладки.

  3. Alexander

    Вечер добрый!

    Пытаюсь вставить картинку-лого в шапку сайта, но по вашей инструкции пока не получается — картинка не отображается, хотя место для нее «зарезервировано» иконкой. Подскажите пожалуйста как исправить? Сайт gaid.in.ua.

    1. Павел

      Если это реклама гугла в верхнем правом углу, то она отображается. Нужно куки чистить ...

    2. Alexander

      К слову, адрес картинок у меня задается строчкой вида:

      <img src="/images/picture.jpg" >

      Я скопировал картинку в папку «images» темы, но пока не получается. =/

  4. Alexander

    Да, именно так — хочу удалить рекламу, чтобы поставить рисованный баннер сайта. Хотя сам скрипт я вроде удалял. Проверю еще раз.

    1. Павел

      Ну а как вы выводили рекламу ? Просто замените код. После манипуляций чистить куки нужно, что бы проверить вывод.

  5. Aman

    Спасибо тебе огромное! в моей теме сайта отсутсвовала шапка, и я голову ломал как ее туда добавить, и еще раз спасибо!

  6. владимир

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

  7. Slavik

    Огромное спасибо Павлу, что чётко и без соплей ответил на вопрос — как вставить баннер на сайт.

  8. Василий

    Добрый день 

    Пожалуйста подскажите как сделать xmj, при клика по шапке сайта открывался рекламный сайт  работаю с игровыми офферами, и в статистике по анализу кликов вижу что многие кликают по шапке , но шапка fnq по умолчанию ведет на главную станицу сайта , а мне надо чтоб открывался рекламные сайт ВОТ СКРИН СДЕЛАЛ ЧТОБ ПОНЯТНЕЕ БЫЛО prntscr.com/b3pgs8

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *