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

Вебмастеринг

В данной статье я научу вас делать "тизерную" рекламу самостоятельно на своем сайте, что поможет вам увеличить доход и с 99% вероятности обойти с ней блокировку AdBlock.

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

В данных тизерах вы можете рекламировать какой-то товар партнерок (чай, крема, гаджеты, игры и прочее). Вставлять подобные рекламные блоки на сайт удобно при помощи AdsPlace'r Pro или прямо в код шаблона. Можно использовать во всплывающих окнах Sociale'r. На ваш выбор.

Что именно мы создаем

Ниже будут примеры с пояснениями. Делать мы будем 2 вида тизеров:

  • Горизонтальный - отлично подойдет для тела статьи (в начале, в середине или конце статьи).
  • Вертикальный - обычно используют в сайдбаре, но иногда и в теле статьи.

Горизонтальный блок в ряд

Можете потягать за край браузера и посмотреть как блок меняется исходя из разрешения. Либо зайдите в статью с мобильника.

Это тизерный блок, где у нас:

  • 3 картинки, у каждой есть подпись.
  • Каждый тизер (картинка+подпись) являются ссылкой на какую-то страницу (обернуты в ссылку).

Вот код HTML-разметки этого блока:

Вы подменяете картинки, текст и адрес ссылки на свой. Можете добавить четвертый блок.

А теперь магия CSS (визуальное оформление). Здесь все сугубо индивидуально для каждого дизайна сайта. Но я вам дам все нужные параметры, которые могут пригодиться. Напротив каждого параметра есть пояснение, чтобы вы могли скорректировать дизайн под себя даже не обладая навыками в верстке.

У вас в шаблоне есть файл стилей style.css (точно есть в корне шаблона или в папке css). Так же в некоторых шаблонах предусмотрена возможность вставлять параметры css в специальное поле настроек этого шаблона. Владельцы плагина Sociale'r так же найдут в нем подобное поле.

Есть еще вариант добавить эффектов при наведении курсора мышки на тизеры. Если требуется подобное решение, то пишите в комментариях чтобы дополнил статью.

Вертикальный блок (друг под другом)

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

В данном случае разметка HTML немного изменилась: class для всего блока стал tizery-vr, чтобы отличался от горизонтального. Остальное идентично.

А теперь магия CSS.

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

Касательно AdBlock

Чтобы наверняка он не заблочил вашу рекламу, подмените названия class для каждого блока. Это на случай, если все будут использовать одинаковое название блоков из статьи. Не используйте в этих названиях слово связанных с рекламой (из головы придумайте, хоть тот же набор букв). И, конечно же, название должно быть на латинице, без пробелов.

Обратите внимание, что это название меняется в HTML-разметке, а так же потом используется в css.

Сами картинки обязательно закачивайте к себе на сайт и потом размещайте в блоках. Чтобы их путь начинался с вашего домена.

Итог

Теперь вы умеете самостоятельно верстать тизерные блоки рекламы у себя на сайте и при этом не нужно платить фрилансерам.

Подобных блоков вы можете сделать сколько угодно. Просто один раз пропишите стили и потом расставляйте нужную HTML-разметку по сайту.

Безусловно, можно еще более стилизовать блоки. Но это уже будет индивидуально под каждый сайт и здесь всех вариантов предусмотреть не возможно.

Есть вопросы? Задавайте их в комментариях.

Ваши комментарии
  • Дима
    2016.11.18

    Хорошо написана статья!

    Ответить
  • Александр
    2016.11.25

    Будет здорово, если будет время дополнить статью: как добавить эффект/эффекты наведения курсора на тизер. Заранее спасибо.

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

Отправить запрос в техническую поддержку

наверх