Приветствую вас, читатели моего блога! На тему этой статьи меня вновь натолкнул вопрос в мою службу поддержки: подскажите, как разместить баннер на сайте? Не углубляясь далеко в тему, я решил написать короткую статью и приложить небольшое видео, в котором подробно покажу, как размещать рекламные баннеры.
На самом деле сложно ничего нет, и справится с этой задачей даже новичок.
Давайте сразу определимся, где можно разместить этот блок. Выбор не велик, можно установить анимированную картинку в шапку сайта, в подвал (хотя это редкость), в статью и в сайдбар.
Наиболее распространенные варианты – это вставка картинки в тело статьи и в сайдбар. Давайте разберемся, как это сделать.
Я покажу вам на примере, как можно вставить на свой сайт вот такой баннер:
Для работы нам потребуется специальный hlml-код:
Урок 11 Как разместить ссылку и баннер в Одноклассниках, ка
Просто скопируйте данный код и вставьте его в новом файле блокнота
Далее Вам необходимо закачать графический файл баннера на хостинг. Для этого в админ-панели вашего блога перейдите в раздел «Медиафайлы», выберите вкладку «Добавить новый» и выберите файл на Вашем компьютере.
Следующий шаг – скопируйте адрес загруженной картинки, как показано на рисунке
И затем сохраните картинку.
После этого в коде в файле блокнота замените слова ПУТЬ К КАРТИНКЕ на адрес баннера на вашем хостинге, а слова ВАША ССЫЛКА на ссылку, ведущую на сайт, который вы рекламируете.
Выглядит это вот так:
На этом подготовка завершена и переходим к самому интересному.
Как разместить баннер на сайте в статье
После того, как вы написали статью и опубликовали ее на своем блоге, выберете место, где будет располагаться баннер. В редакторе статьи в панели администрирования wordpress переключитесь на вкладку «Текст», найдите ту часть статьи, куда необходимо вставить приготовленный код и добавьте его просто нажав на правую кнопку мыши и выбрав команду «Вставить».
Если вы оставите код в таком виде, то баннер у вас будет располагаться слева по умолчанию. Чтобы он стал по центру, добавьте перед кодом тег , а после кода тег . Теперь картинка находится точно по центру.
Опубликуйте статью и проверьте, как она будет выглядеть на вашем блоге.
Как разместить баннер на сайте в сайдбаре
Зайдите в админ-панель вашего блога в раздел «Виджеты». Слева выберите виджет «Текст» и удерживая его левой кнопкой мыши перетащите в колонку сайдбара.
Поле «Название» можно оставить пустым, а в поле «Текст» нужно вставить приготовленный код баннера. Чтобы он также располагался по центру добавьте тег по аналогии, как и для выравнивания баннера в статье.
Нажмите кнопку «Сохранить», перейдите на сайт и проверьте, как выглядит баннер.
Для удобства и наглядности я записал небольшое видео, в котором подробно показал, что и как нужно делать:
Я постарался в статье показать, на мой взгляд, самый простой и в то же время надежный способ, как разместить баннер на сайте в статье и в сайдбаре.Помогла ли вам данная статья? Расскажите в комментариях, получилось ли у вас установить рекламный баннер на своем блоге?
Спасибо, что поделились статьей в социальных сетях!
Дмитрий, благодаря Вашей статье я удачно вставила баннеры на свой блог в сайт бар. В статью вставляла и до этого уже. Но как вы разместили баннер в шапку сайта? Это наверное в коде копаться нужно?
Ирина, а я в этой статье про шапку сайта не говорил, об это выпущу отдельный пост. Да, в некоторых темах уже есть готовое место для баннера, а в некоторых нужно править код, но если нет навыков по работе с кодом, то лучше не править его, иначе можно просто положить свой сайт. Есть еще одна программа классная, но о ней тоже в следующих статьях, так что заглядывайте почаще
Обязательно загляну, и сайт ваш в закладочки определю! Я в вебмастеринге полный профан, честно говоря. Хотя в свое время мне пришлось повозиться с кодом, когда удаляла вирусы с сайта. Фрилансеру делала заказ — а он не нашел, а денег взял
Здравствуйте, Дмитрий!
Очень полезный и качественный контент, по вашим урокам я научился вставлять баннера на сайт за, что огромное спасибо!
Еще интересно как же все-таки вставляются баннера в шапку сайта, будем очень признательны если вы научите нас это делать!
Евгений, по поводу вставки баннеров в шапку сайта я постараюсь записать видеоурок, на все просто времени не хватает, но судя по отзывам и письмам от моих читателей и учеников онлайн-школы «Я Блогер» эта тема достаточно востребована, значит видеоурок будет )
Спасибо, полезная инфа. Только я еще статью не написала, куда баннер собралась вставлять. А как сделать самому баннер не хотите написать?
Светлана, скоро появится и статья о том, как сделать баннер прямо в режиме онлайн, я уже много писем получил с просьбой записать урок, так что статья и видео будут опубликованы в ближайшее время, следите за обновлениями блога
Дмитрий,как всегда с удовольствием посмотрела Ваш видеоурок, все просто и понятно. Но возник вопрос. Я делала по другому, теперь не знаю, правильно или нет.
На странице сайта или в статье:1)вставка картинки 2)выделяю картинку 3)вставить ссылку 4)далее вставляю партнерскую ссылку. И получается тот же эффект — кликаю по картинке и попадаю на целевую страничку (по аналогии с ссылками в тексте). То есть без использования кода баннера. Так делать можно или нежелательно? Подскажите пожалуйста.
Екатерина, да, можно делать и так. Вообще шаблонов кода для баннеров много, я в статье рассказал лишь об одном из них
Спасибо,Дмитрий,статья очень нужная,обязательно воспользуюсь!И отдельное спасибо за прекрасные доходчивые ролики на курсе Путь блогера!
Фатима, Вам спасибо за отзыв! Все уроки были записаны что называется «с душой», мы с Евгением Вергусом старались максимально подробно все разложить по полочкам.
Дмитрий, спасибо огромное за статью! Пока еще не знала о Вашей статье, попыталась сама разместить баннер — не получилось. Прочитала статью и по шагам все сделала. Супер!У меня получилось разместить баннер в статье.
Виктория, я рад, что статья была Вам полезна, на самом деле там нет ничего сложного.
Здравствуй, Дмитрий! Спасибо, за статью, очень помогла. Вставила баннер в статью быстро и легко, даже видео не смотрела, всё понятно описано.
Татьяна, пожалуйста, там действительно нет ничего сложного
Дмитрий, прекрасная статья, все понятно рассказано и показано, впрочем,как и всегда. Мне тоже интересно, как вставить баннер в шапку, если, конечно, в моем случае будет такая возможность.А может и тему заменю. Вообще, отдельное спасибо Вам за те уроки, которые Вы проводили в школе Евгения и которые проводите в курсе Путь блоггера».СПАСИБО.
Светлана, спасибо за отзыв! По поводу размещения рекламы в шапке сайта обязательно запишу видео и напишу статью, но чуть позже, сейчас еще много планов нужно выполнить.
Большое спасибо за полезную статью! Я как раз искал такую информацию. Прохожу обучение в Вашей школе. И еще спасибо за инфу про мелькающие баннеры. У меня стоит парочка, думаю, лучше поставить вместо них статичные просто, а не гифки.
Сергей, баннеры мелькающие или статичные во многом зависит от самих баннеров (чтобы не раздражали), иногда анимированные привлекают больше внимания, тут все индивидуально и надо тестировать
Дмитрий, добрый день! Спасибо за статью. Наделала ошибок при размещении баннера в статье. Буду исправлять и наверно об этом статью напишу. Недавно я тоже записала видео Как разместить баннер на сайте, но речь идет о баннерах в шапке и сайдбаре.
Не так подробно как у вас, но не судите строго, мой первый опыт. Еще мне повезло с темой сайта, т.к. она позволяет вставить код баннера в шапку сайта.
Татьяна, рад, что статья была для Вас полезной. Обязательно пишите статьи, потому как все мы разные, и подача материала тоже у каждого своя, соответственно, и своя аудитория.
Здравствуйте, Дмитрий! Как раз сейчас пытаюсь сделать картинки для своего блога, но мучаюсь вопросом, как найти в интернете повер пойнт для моего Виндоуса 10. Нахожу вроде бы для 10-го, начинаю скачивать, и не получается. вы может, знаете, где взять программу Повер пойнт для 10-го виндоуса? Буду очень признательна! Блог ваш поставлю в закладки — очень интересен своей информацией!
Ольга, к сожалению, такой информации дать не смогу, поскольку сейчас в Интернете много опасных архивов с вирусами и даже то, что вчера работало хорошо, сегодня может содержать вредоносную программу, поэтому я не хочу подвергать опасности своих читателей
Добрый день,Дмитрий! Материал,как всегда, на высшем уровне! Даже не верится, что Вы всего 2 года занимаетесь этим делом. Ваши материалы просто бесценны, особенно, для новичков. Спасибо!
Ирина, Вам спасибо за отзыв! Стараюсь максимально подробно раскрывать каждый вопрос, чтобы у новичков не оставалось выбора, как взять, применить и получить результат )
Здравствуйте. А как вставить баннер вверху главной странице, на которой выводится список статей?
Валерий, для этого нужно либо изменить код главной страницы в редакторе, либо найти шаблон темы для wordpress, в котором уже реализована эта функция
Источник: blog-webmastera.ru
Как разместить баннер на сайте
Для размещения дополнительной информации на сайте (в текстовом формате, в виде картинки или анимации, со ссылкой на интернет-ресурс и т.д.) удобно пользоваться баннерами. Такой инструмент позволит дополнить контент Вашего сайта, не нарушая его структуру, эстетику и удобство пользования. При этом добавление баннера на Ваш сайт с помощью конструктора «Нубекс» не потребует технически сложных манипуляций и займет не более пяти минут.
Для того, чтобы вставить баннер на сайт, необходимо войти в режим управления сайтом и в панели управления (слева) выбрать раздел «Виджеты».
Затем следует выбрать колонку, в которой Вы хотите разместить баннер.
Обратите внимание: в системе «Нубекс» баннеры можно вставить только в левую или правую колонку, соответственно, максимальная ширина баннера определяется шириной колонки: 220 точек. Если Ваш сайт использует дизайн без колонок (одноколоночник), то баннеры, добавленные в систему, на сайте не отобразятся.
После выбора колонки нужно кликнуть по раскрывающемуся меню: откроется список элементов, которые Вы можете добавить в эту колонку.
Вы можете разместить баннер как в виде картинки, так и в виде кода (созданного Вами или полученного от партнера/исполнителя).
Размещение баннера в виде картинки
Если Вы хотите вставить баннер картинкой, выберите в меню пункт «Создать блок баннеров»: откроется раздел редактирования.
Вы можете изменять тип оформления баннера:
- ввести заголовок (необязательно): он будет отображаться над опубликованным баннером-картинкой;
- изменить стиль отображения баннера и заголовка: добавить фон или рамку для картинки, фон для заголовка.
Обратите внимание: по умолчанию система предлагает Вам отображать баннер как на главной, так и на всех внутренних страницах сайта. Если Вам необходимо добавить баннер только на главную страницу (или только на остальные), уберите нужные галочки в меню вверху страницы. Отобразить баннер только на некоторых (не всех) внутренних страницах сайта невозможно.
Для выбора картинки — будущего баннера — нажмите на кнопку «Загрузить изображения» внизу экрана, выберите нужный файл на компьютере и нажмите «Открыть».
Обратите внимание: допустимые форматы загружаемых файлов — jpeg, jpg, gif, png; максимальный размер каждого файла — 10 Мб. В ширину картинки должны иметь не менее 200px.
После загрузки картинки Вы можете изменить параметры баннера, щелкнув по стикеру «Изменить настройки тизера» в графе «Редактирование».
Вы можете ввести подпись к баннеру (она будет отображаться под картинкой) и краткое описание (отобразится под подписью), а также добавить ссылку на интернет-ресурс: в таком случае при нажатии на баннер пользователь будет перенаправлен на тот сайт, адрес которого Вы ввели в поле «URL ссылки».
Затем нужно сохранить изменения и выйти из режима редактирования. С помощью режима просмотра сайта следует убедиться, что размещенный Вами баннер отображается корректно.
Как показать баннеры в случайном порядке
Если Вы хотите, чтобы при каждом обновлении страницы (или при переходе в другой раздел сайта) у пользователя отображался случайный баннер из определенного набора (пула), при создании блока баннеров нужно сделать следующее:
- При загрузке изображений выбрать не одну картинку, а несколько — это будет основой для Вашего пула;
- После загрузки изображений (при необходимости) для каждого из них отредактировать параметры баннера (подпись, URL ссылки, краткое описание);
- Установить режим отображения: случайный или в порядке сортировки. Сортировать порядок изображений Вы можете кнопками «вверх/вниз» в поле, где отображаются загруженные картинки;
- Установить количество отображаемых анонсов (1-10), т.е. то количество баннеров из пула, которое будет одновременно отображаться на странице;
- Сохранить изменения, выйти в режим просмотра сайта и обновлять страницу до тех пор, пока меняющиеся картинки не перестанут Вас радовать.
Размещение баннера в виде кода
Если Вы уже имеете код для вставки баннера (например, код предоставлен Вашим партнером или сгенерирован специальным сервисом), то выберите в меню пункт «Создать текстовый блок». Перейдите в режим «Источник» и вставьте код в текстовое поле.
Так же, как и при размещении баннера-картинки, Вы можете изменять параметры отображения (на главной и внутренних страницах сайта, в т.ч. в мобильной версии) и типы оформления баннера (фон и рамка).
Видео: как вставить баннер на сайт
Как создать сайт самостоятельно
Работа со страницами
Наполнение страниц
Работа с изображениями и файлами
Фотогалереи
Новости
Каталог товаров
Интернет-магазин
Формы обратной связи
Виджеты
Функции продвижения
Доступ в систему управления
Внешние сервисы
Дизайн
Источник: nubex.ru
Как разместить баннер на сайте ucoz | Как создать сайт на конструкторе, на движке или своими руками
Давайте сегодня поработаем с графикой на нашем сайте, а если быть точным, затронем такую тему как баннер. Что вообще такое баннер ? Опишу своими словами как вижу это я.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Баннер — это картинка которая размещается на сайте и если на эту картинку кликнуть мышкой нас перекинет на другую страницу сайта или на другой сайт, к примеру на сайт рекламодателя.
Обычно баннеры используются как рекламные объявления на сайте, при помощи такого баннера проще простого заинтересовать рекламой посетителя сайта. И так, надеюсь теперь вы понимаете что такое баннер, и если это так — тогда давайте рассмотрим поближе этот вопрос и узнаем как разместить баннер на сайте ucoz.
Виды баннеров
Как я сказал выше баннер это картинка, а картинка на сайте может быть разных размеров. К примеру встречаются баннера квадратные, горизонтальные, вертикальные (их ещё называют небоскрёбы), так-же сейчас появились адаптивные, это те баннера которые подстраиваются под размеры монитора. Размеры у баннеров могут быть разные, но роль играют одну и туже, привлечь посетителя что-бы он нажал на него.
3 инструмента для размещения баннера
Баннера для сайта ucoz можно добавлять по разному, а если быть точным я знаю три разных варианта как это можно реализовать. Каждый вариант зависит от того какие цели вы преследуете. К примеру, если вы хотите разместить рекламу у себя на сайте со стороннего сервиса, тогда это делается через обычный скрипт, который сервис рекламной компании предоставит вам.
Если вы просто хотите разместить рекламный баннер на ваши услуги которые рекламируете на вашем же сайте, и у вас нет такой цели что-бы отслеживать статистику по переходом по данному баннеру, тогда такой вид рекламы можно организовать при помощи обычного HTML кода. Ну и третий вариант это когда у вас на сайте появился собственный рекламодатель и даже не один, тогда вот здесь понадобится инструмент который помогает отслеживать каждый баннер на сайте и вести статистику, сколько посетителей перешло на сайт рекламодателя.
Сторонний код
Начнём пожалуй с варианта номер один — это когда вам сторонний сервис предоставил рекламный код (Скрипт), и вы его должны разместить у себя на сайте. В данном примере я покажу как на сайте юкоз размещать данный скрипт, который вы перед этим должный получить у рекламной площадке к примеру Googleadsense. И так, если вы получили код, зайдите в панель управления, как это сделать смотрим здесь и перейдите по кнопке дизайн, откроется выпадающие окно в котором нажмите на кнопку управление дизайном (шаблоны).
Наследующий странице у нас возникает вопрос, а в какое место на сайте разместить баннер? У нас есть много вариантов. Баннер можно вставить в шапку сайта или его можно установить в подвал сайта, хотя обычно этого никто не делает и на это есть свои причины. А так-же его можно разместить или в правый сайдбар или левый (Левая колонка на сайте или правая) — ну и конечно на странице с категориями и ещё на странице где у вас находится материал и комментарий к нему, то-есть там где люди читают смотрят или слушают ваш контент. В общем вариантов много, будем помаленьку разбирать все.
Шапка сайта
Начнём пожалуй с самого простого, это с верхней части сайта её называют (Шапка сайта). К примеру мы хотим чтобы наш баннер был установлен в верхней части сайта, здесь —
Для этого на странице которую мы открыли, найдите кнопку верхняя часть сайта и нажмите на неё.
Должна открыться вот такая страница с вот таким окном.
В данном окне мы видим код который настраивает шапку сайта. В это окно нужно вставить наш код с рекламой, но просто его так не вставишь, для этого нужны доп.коды, без них реклама на сайте будет отображаться не в том месте где нам нужно. И так — нам нужно раздвинуть строчки кода что-бы освободить место для нашего скрипта и в пустое место прописать вот такой вот код —
На каждом сайте шаблоны разные и в какую строчку вписать данный код будет зависит от количество кода который присутствует в данном окне, так что здесь вам нужно будет работать методом тыка, попал не попал. Но примерный ориентир, это под логотипом сайта, там где написано мой сайт. Давайте разберём сам код который мы вписали в шапку сайта.
И так? это обычный тег div который пишется вот так
Сюда помещается содержимое блока Его ещё называют блок див. Как мы наблюдаем код состоит из двух частей, с открывающим тегом и закрывающим. Различие между закрывающим и открывающим тегом только в косой черте. — это закрывающий тег. Такие теги называют парными или контейнерами. Между открывающим и закрывающим тегом помещаются другие теги или коды и даже простой текст.
В данном случае мы туда поместим наш рекламный код. Данный блок див нам нужен как контейнер при помощи которого мы будем двигать нашу рекламу в любое место на сайте. А двигать мы будем при помощи дополнительных кодов, которые идут как параметры к данному тегу div их называют атрибуты.
Атрибуты всегда идут в паре, а пара атрибута это значение. Атрибуты с ихними значениями вписываются в любой открывающийся тег, или одинарный. (Одинарные теги не имеют закрывающего тега).
Вот так выглядит пример с атрибутом и значением. —
Пример содержимое блока . Здесь мы видим слово style это атрибут, дальше в коде мы видим равно, равно обозначает что здесь кончается атрибут и начинается значение, значение пишется или в двойных кавычках или в одинарных. Почему так происходит разберём как нибудь в другой раз. В тег может помещаться большое количество атрибутов и их значений, на картинке выше мы видим один атрибут и два значения. Что бы написать второй атрибут в тег, достаточно после одинарных или двойных кавычек поставить пробел.
Атрибуты задают задачу тегам что нужно делать, а значения для атрибута говорит как и насколько это сделать. Давайте разберём на примере — Содержимое блока, атрибут align задаёт блоку DIV правило, что нужно выровнять блок, а значение со словом center говорит как это сделать, в нашем случае по центру. Значение у атрибута align может быть и left и center или right что значит ВЛЕВО, По центру, Вправо.
Давайте разберём наш атрибут который присутствует в коде, он называется style. Style говорит нашему тегу что нужно добавить стили css, а значение float говорит что блок div нужно поднять и передвинуть над другими блоками, у нас присутствует ещё один параметр left, которое передвигает блок влево.
В коде у нас присутствует и второе значение margin. Данное значение говорит браузеру что нужно сделать отступ от блока. Отступы задаются при помощи цифр в пикселей, всего четыре параметра которые задаются по часовой стрелке. Отступить от блока на 41px сверху, 54px делают отступ от блока с право, ноль задаёт блоку отступ снизу, последний ноль задаёт отступ слева. Обычно нули пишутся без букв px.
Здесь вы сами можете подобрать на сколько пикселей отступить сверху или с право от блока, для этого просто впишите за место 41px к примеру 64px, или за место 54px впишите 154px. Таким образом при помощи значения margin мы можем двигать нашу рекламу в любое место на сайте, а точнее в верх в право влево и вниз.
И так, если блок div был вписан в наше окно, осталось в него разметить код баннера, и нажать кнопку сохранить.
Перейдите на свой сайт и посмотрите появился ли блок с баннером, если блок появился но он отображается не в том месте где вы хотите, тогда просто поиграйте с пикселями у значения margin что-бы подвигать блок. Должно получится вот так —
Кстати
О стилях мы поговорим как нибудь в другой раз, сейчас просто запомните что стиле помогают оформлять наш сайт, к примеру задать задний фон на сайте, разукрасить текст, поставить в любое место на сайте тот или иной элемент в нашем случае это передвинуть рекламу в право.
Заключение
В этом уроке мы разобрались с первым вариантом добавления баннера на сайт, в следующем уроке разберём как работать с баннером который создадим при помощи разметки HTML, а так-же подробно изучим инструмент который присутствует на самом конструкторе ucoz. Этот инструмент помогает не только добавлять баннера на сайт но и отслеживать статистику по переходам на другие сайты.
Источник: nischenko.ru