Открыть меню

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

Приветствую вас, читатели моего блога! На тему этой статьи меня вновь натолкнул вопрос в мою службу поддержки: подскажите, как разместить баннер на сайте? Не углубляясь далеко в тему, я решил написать короткую статью и приложить небольшое видео, в котором подробно покажу, как размещать рекламные баннеры.

На самом деле сложно ничего нет, и справится с этой задачей даже новичок.

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

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

Наиболее распространенные варианты – это вставка картинки в тело статьи и в сайдбар. Давайте разберемся, как это сделать.

Я покажу вам на примере, как можно вставить на свой сайт вот такой баннер:

 

Для работы нам потребуется специальный hlml-код:

>>>Посмотреть и скопировать шаблон кода баннера<<<

Просто скопируйте данный код и вставьте его в новом файле блокнота

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

Далее Вам необходимо закачать графический файл баннера на хостинг. Для этого в админ-панели вашего блога перейдите в раздел «Медиафайлы», выберите вкладку «Добавить новый» и выберите файл на Вашем компьютере.

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

Следующий шаг – скопируйте адрес загруженной картинки, как показано на рисунке

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

И затем сохраните картинку.

После этого в коде в файле блокнота замените слова ПУТЬ К КАРТИНКЕ на адрес баннера на вашем хостинге, а слова ВАША ССЫЛКА на ссылку, ведущую на сайт, который вы рекламируете.

Выглядит это вот так:

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

На этом подготовка завершена и переходим к самому интересному.

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

После того, как вы написали статью и опубликовали ее на своем блоге, выберете место, где будет располагаться баннер. В редакторе статьи в панели администрирования wordpress переключитесь на вкладку «Текст», найдите ту часть статьи, куда необходимо вставить приготовленный код и добавьте его просто нажав на правую кнопку мыши и выбрав команду «Вставить».

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

Если вы оставите код в таком виде, то баннер у вас будет располагаться слева по умолчанию. Чтобы он стал по центру, добавьте перед кодом тег <center> , а после кода тег </center>. Теперь картинка находится точно по центру.

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

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

Как разместить баннер на сайте в сайдбаре

Зайдите в админ-панель вашего блога в раздел «Виджеты». Слева выберите виджет «Текст» и удерживая его левой кнопкой мыши перетащите в колонку сайдбара.

Поле «Название» можно оставить пустым, а в поле «Текст» нужно вставить приготовленный код баннера. Чтобы он также располагался по центру добавьте тег <center> по аналогии, как и для выравнивания баннера в статье.

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

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

Для удобства и наглядности я записал небольшое видео, в котором подробно показал, что и как нужно делать:

Я постарался в статье показать, на мой взгляд, самый простой и в то же время надежный способ, как разместить баннер на сайте в статье и в сайдбаре.

Помогла ли вам данная статья? Расскажите в комментариях, получилось ли у вас установить рекламный баннер на своем блоге?

Спасибо, что поделились статьей в социальных сетях!

Обсуждение: 27 комментариев
  1. Дмитрий, благодаря Вашей статье я удачно вставила баннеры на свой блог в сайт бар. В статью вставляла и до этого уже. Но как вы разместили баннер в шапку сайта? Это наверное в коде копаться нужно?

    Ответить
    1. Ирина, а я в этой статье про шапку сайта не говорил, об это выпущу отдельный пост. Да, в некоторых темах уже есть готовое место для баннера, а в некоторых нужно править код, но если нет навыков по работе с кодом, то лучше не править его, иначе можно просто положить свой сайт. Есть еще одна программа классная, но о ней тоже в следующих статьях, так что заглядывайте почаще 🙂

      Ответить
      1. Обязательно загляну, и сайт ваш в закладочки определю! Я в вебмастеринге полный профан, честно говоря. Хотя в свое время мне пришлось повозиться с кодом, когда удаляла вирусы с сайта. Фрилансеру делала заказ — а он не нашел, а денег взял 🙁

        Ответить
  2. Здравствуйте, Дмитрий!
    Очень полезный и качественный контент, по вашим урокам я научился вставлять баннера на сайт за, что огромное спасибо!
    Еще интересно как же все-таки вставляются баннера в шапку сайта, будем очень признательны если вы научите нас это делать!

    Ответить
    1. Евгений, по поводу вставки баннеров в шапку сайта я постараюсь записать видеоурок, на все просто времени не хватает, но судя по отзывам и письмам от моих читателей и учеников онлайн-школы «Я Блогер» эта тема достаточно востребована, значит видеоурок будет )

      Ответить
  3. Спасибо, полезная инфа. Только я еще статью не написала, куда баннер собралась вставлять. А как сделать самому баннер не хотите написать?

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

      Ответить
  4. Дмитрий,как всегда с удовольствием посмотрела Ваш видеоурок, все просто и понятно. Но возник вопрос. Я делала по другому, теперь не знаю, правильно или нет.
    На странице сайта или в статье:1)вставка картинки 2)выделяю картинку 3)вставить ссылку 4)далее вставляю партнерскую ссылку. И получается тот же эффект — кликаю по картинке и попадаю на целевую страничку (по аналогии с ссылками в тексте). То есть без использования кода баннера. Так делать можно или нежелательно? Подскажите пожалуйста.

    Ответить
    1. Екатерина, да, можно делать и так. Вообще шаблонов кода для баннеров много, я в статье рассказал лишь об одном из них

      Ответить
  5. Спасибо,Дмитрий,статья очень нужная,обязательно воспользуюсь!И отдельное спасибо за прекрасные доходчивые ролики на курсе Путь блогера!

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

      Ответить
  6. Дмитрий, спасибо огромное за статью! Пока еще не знала о Вашей статье, попыталась сама разместить баннер — не получилось. Прочитала статью и по шагам все сделала. Супер!У меня получилось разместить баннер в статье.

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

      Ответить
  7. Здравствуй, Дмитрий! Спасибо, за статью, очень помогла. Вставила баннер в статью быстро и легко, даже видео не смотрела, всё понятно описано.

    Ответить
    1. Татьяна, пожалуйста, там действительно нет ничего сложного

      Ответить
  8. Дмитрий, прекрасная статья, все понятно рассказано и показано, впрочем,как и всегда. Мне тоже интересно, как вставить баннер в шапку, если, конечно, в моем случае будет такая возможность.А может и тему заменю. Вообще, отдельное спасибо Вам за те уроки, которые Вы проводили в школе Евгения и которые проводите в курсе Путь блоггера».СПАСИБО.

    Ответить
    1. Светлана, спасибо за отзыв! По поводу размещения рекламы в шапке сайта обязательно запишу видео и напишу статью, но чуть позже, сейчас еще много планов нужно выполнить.

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

    Ответить
    1. Сергей, баннеры мелькающие или статичные во многом зависит от самих баннеров (чтобы не раздражали), иногда анимированные привлекают больше внимания, тут все индивидуально и надо тестировать

      Ответить
  10. Дмитрий, добрый день! Спасибо за статью. Наделала ошибок при размещении баннера в статье. Буду исправлять и наверно об этом статью напишу. Недавно я тоже записала видео Как разместить баннер на сайте, но речь идет о баннерах в шапке и сайдбаре. Не так подробно как у вас, но не судите строго, мой первый опыт. Еще мне повезло с темой сайта, т.к. она позволяет вставить код баннера в шапку сайта.

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

      Ответить
  11. Здравствуйте, Дмитрий! Как раз сейчас пытаюсь сделать картинки для своего блога, но мучаюсь вопросом, как найти в интернете повер пойнт для моего Виндоуса 10. Нахожу вроде бы для 10-го, начинаю скачивать, и не получается. вы может, знаете, где взять программу Повер пойнт для 10-го виндоуса? Буду очень признательна! Блог ваш поставлю в закладки — очень интересен своей информацией!

    Ответить
    1. Ольга, к сожалению, такой информации дать не смогу, поскольку сейчас в Интернете много опасных архивов с вирусами и даже то, что вчера работало хорошо, сегодня может содержать вредоносную программу, поэтому я не хочу подвергать опасности своих читателей

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

    Ответить
    1. Ирина, Вам спасибо за отзыв! Стараюсь максимально подробно раскрывать каждый вопрос, чтобы у новичков не оставалось выбора, как взять, применить и получить результат )

      Ответить
  13. Здравствуйте. А как вставить баннер вверху главной странице, на которой выводится список статей?

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

      Ответить

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

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

Дмитрий Воробьев © 2017 Блог вебмастера · Копирование материалов сайта без разрешения запрещено
Дизайн и поддержка: GoodwinPress.ru
Служба поддержки  |  Политика конфиденциальности  |  Договор-оферта  |  Правила сайта  |  Снятие ответственности