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

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

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

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

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

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

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

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

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

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

Какой-то заголовок рекламы №1 Картинка 2

Какой-то заголовок рекламы №2 очень длинный-предлинный Картинка 3

Какой-то заголовок рекламы №3

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

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

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

<div class="tizery-hr">
<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/adsplacer.png" alt="Картинка 1" />Какой-то заголовок рекламы №1</a>
<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_1.png" alt="Картинка 2" />Какой-то заголовок рекламы №2</a>
<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_2.png" alt="Картинка 3" />Какой-то заголовок рекламы №3</a>
</div>

<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/adsplacer.png" alt="Картинка 1" />Какой-то заголовок рекламы №1</a>

<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_1.png" alt="Картинка 2" />Какой-то заголовок рекламы №2</a>

<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_2.png" alt="Картинка 3" />Какой-то заголовок рекламы №3</a>

</div>

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

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

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

.tizery-hr {
    border: 1px solid #c4c4c4; /* Рамка всего блока. Стоит ширина 1px, solid - непрерывная, #c4c4c4 - это ее цвет. Если рамка не нужна - просто удалите эту строку */
    margin: 10px 0 10px 0; /* Внешний отступ всего блока с тизерами от контента страницы. Стоит сверху и снизу по 10px, а слева и справа 0px */
    padding: 10px 5px 5px 5px; /* Внутренний отступ внутри блока. Чтобы не сливались с краями рамки тизеры. Соответственно: сверху 10 px, справа 5px, снизу 5px, слева 5px */
    text-align: center; /* Выравнивание текста во всем блоке по центру */

}
.tizery-hr img {
    width: 150px; /* Установили принудительно ширину картинки в 150px, на случай если у вас будут все разного размера */
    height: 150px; /* Установили высоту картинки в 150px, аналогично как с шириной случай */
    display: block; /* Позволяет перенести текст под картинку в нашем случае. Оставляем так */
    margin: 0 auto 10px; /* Внешний отступ картинки. Сверху 0px, слева и справа auto, чтобы она была ровно по центру своего блока тизера. Снизу 10px, чтобы не сливалось с текстом */
}
.tizery-hr a {
    color: #000 !important; /* Цвет ссылки, если требуется сменить стандартный цвет ссылок шаблона. Попробуйте удалить ее и посмотреть как у вас настроено по-умолчанию в шаблоне */
    display: inline-block; /* Этим параметром мы говорим, чтобы блоки становились в одну строку и при низком разрешении красиво выстраивались друг под другом */
    font-weight: bold; /* Делаем текст жирным. Если не нужно - просто удалите строку */
    font-size: 16px !important; /* Размер шрифта у текста. Поэкспериментируйте с размером */
    margin: 5px 0 5px 0; /* Задаем внешний отступ каждому блоку с тизером, чтобы при низком разрешении они не налазили друг на друга снизу и сверху. Соответственно по 5px сверху и снизу */
    padding: 5px; /* Задаем внутренний отступ для каждого блока с тизером, чтобы тот же текст не прилипал к краям блока, если вы добавите ему рамку */
    width: 200px; /* Задаем ширину блока каждого. Здесь можно сделать и 150px по ширине картинки, чтобы текст ровно под ней был. На ваше усмотрение */
    vertical-align: top; /* Данный параметр выравнивает все тизеры по верхнему краю. Пригодится в случае, если у вас какой-то текст будет больше на 1-2 строки, чем остальные */
}

.tizery-hr {

border: 1px solid #c4c4c4; /* Рамка всего блока. Стоит ширина 1px, solid - непрерывная, #c4c4c4 - это ее цвет. Если рамка не нужна - просто удалите эту строку */

margin: 10px 0 10px 0; /* Внешний отступ всего блока с тизерами от контента страницы. Стоит сверху и снизу по 10px, а слева и справа 0px */

padding: 10px 5px 5px 5px; /* Внутренний отступ внутри блока. Чтобы не сливались с краями рамки тизеры. Соответственно: сверху 10 px, справа 5px, снизу 5px, слева 5px */

text-align: center; /* Выравнивание текста во всем блоке по центру */

}

.tizery-hr img {

width: 150px; /* Установили принудительно ширину картинки в 150px, на случай если у вас будут все разного размера */

height: 150px; /* Установили высоту картинки в 150px, аналогично как с шириной случай */

display: block; /* Позволяет перенести текст под картинку в нашем случае. Оставляем так */

margin: 0 auto 10px; /* Внешний отступ картинки. Сверху 0px, слева и справа auto, чтобы она была ровно по центру своего блока тизера. Снизу 10px, чтобы не сливалось с текстом */

}

.tizery-hr a {

color: #000 !important; /* Цвет ссылки, если требуется сменить стандартный цвет ссылок шаблона. Попробуйте удалить ее и посмотреть как у вас настроено по-умолчанию в шаблоне */

display: inline-block; /* Этим параметром мы говорим, чтобы блоки становились в одну строку и при низком разрешении красиво выстраивались друг под другом */

font-weight: bold; /* Делаем текст жирным. Если не нужно - просто удалите строку */

font-size: 16px !important; /* Размер шрифта у текста. Поэкспериментируйте с размером */

margin: 5px 0 5px 0; /* Задаем внешний отступ каждому блоку с тизером, чтобы при низком разрешении они не налазили друг на друга снизу и сверху. Соответственно по 5px сверху и снизу */

padding: 5px; /* Задаем внутренний отступ для каждого блока с тизером, чтобы тот же текст не прилипал к краям блока, если вы добавите ему рамку */

width: 200px; /* Задаем ширину блока каждого. Здесь можно сделать и 150px по ширине картинки, чтобы текст ровно под ней был. На ваше усмотрение */

vertical-align: top; /* Данный параметр выравнивает все тизеры по верхнему краю. Пригодится в случае, если у вас какой-то текст будет больше на 1-2 строки, чем остальные */

}

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

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

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

Какой-то заголовок рекламы №1 Картинка 2

Какой-то заголовок рекламы №2 очень длинный-предлинный, с бородой. За него копирайтерам вы бы заплатили очень много. Картинка 3

Какой-то заголовок рекламы №3

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

<div class="tizery-vr">
<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/adsplacer.png" alt="Картинка 1" />Какой-то заголовок рекламы №1</a>
<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_1.png" alt="Картинка 2" />Какой-то заголовок рекламы №2</a>
<a href="https://wp-r.ru/" title="Название ссылки"><img src="https://wp-r.ru/wp-content/uploads/2016/10/Screenshot_2.png" alt="Картинка 3" />Какой-то заголовок рекламы №3</a>
</div>

</div>

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

.tizery-vr {
	padding: 5px; /* Внутренний отступ со всех сторон от края сайдбара (виджета). Если не требуется - удаляем строку */
}
.tizery-vr img {
	height: 100px; /* Установили принудительно высоту картинки в 100px, на случай если у вас будут все разного размера */
	margin: 0 10px 0 0; /* Внешний отступ картинки. Сверху 0px, справа 10 px (чтобы не сливалось с текстом), снизу и слева 0 */
	padding: 5px 0 0 0; /* Внутренний отступ картинки. Сделали сверху 5px, чтобы стало ровно по верхней границе с текстом (не было лесенки) */
	width: 100px; /* Установили принудительно ширину картинки в 100px, на случай если у вас будут все разного размера */
}
.tizery-vr a {
	display: flex; /* Позиционирование каждого блока с тизером. Оставляем как есть */
	margin: 10px 0; /* Внешний отступ каждого тизера сверзу и снизу по 10px */
}

.tizery-vr {

padding: 5px; /* Внутренний отступ со всех сторон от края сайдбара (виджета). Если не требуется - удаляем строку */

}

.tizery-vr img {

height: 100px; /* Установили принудительно высоту картинки в 100px, на случай если у вас будут все разного размера */

margin: 0 10px 0 0; /* Внешний отступ картинки. Сверху 0px, справа 10 px (чтобы не сливалось с текстом), снизу и слева 0 */

padding: 5px 0 0 0; /* Внутренний отступ картинки. Сделали сверху 5px, чтобы стало ровно по верхней границе с текстом (не было лесенки) */

width: 100px; /* Установили принудительно ширину картинки в 100px, на случай если у вас будут все разного размера */

}

.tizery-vr a {

display: flex; /* Позиционирование каждого блока с тизером. Оставляем как есть */

margin: 10px 0; /* Внешний отступ каждого тизера сверзу и снизу по 10px */

}

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

Касательно AdBlock

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

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

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

Итог

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

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

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

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

Коментарии

Дима

18 ноября 2016 в 14:56

Ответить

Хорошо написана статья!
Александр

25 ноября 2016 в 06:05

Ответить

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

13 апреля 2017 в 15:53

Ответить

Подскажите а как можно сделать такого вида?
https://gyazo.com/ea48590820811ff430211b05e98f3009
И растягивалось по ширине страницы, буду признателен
- Виталик
  
  13 апреля 2017 в 16:12
  
  Ответить
  
  Вертикальный блок из примера.
  Добавьте для .tizery-vr параметр width:100%;
Николай

3 июня 2017 в 15:02

Ответить

У меня вместо горизонтального блока получился вертикальный, хотя я все по-вашему делал. Почему так?
- Виталий WP-R.ru
  
  3 июня 2017 в 15:06
  
  Ответить
  
  По всей видимости что-то не так сделали, либо у вас в шаблоне перебивает стили.
  К сожалению, не видя ваш сайт и реализацию больше сказать нечего.
Игорь

6 марта 2018 в 03:39

Ответить

Добрый день, подскажите а как можно сделать горизонтальный рекламный блок вот такого плана http://prntscr.com/indgho с рандомным переходом между картинками?
Геннадий

1 апреля 2018 в 00:08

Ответить

Здравствуйте! Подскажите пожалуйста, как такой код:
custom(4, 36612228, 5564); custom(7, 87017382, 5564); custom(13, 9387086, 5564);
реализовать с помощью вашего плагина. Не могу разобраться! Заранее Вам благодарен.
- Виталий WP-R.ru
  
  1 апреля 2018 в 09:37
  
  Ответить
  
  Добрый день.
  Вставить в поле плагина для кода.
  Можете написать в тикеты техподдержке и вам наглядно покажут прямо у вас на сайте.
Надежда

4 мая 2018 в 15:20

Ответить

Здравствуйте, Виталий!

Спасибо за чрезвычайно полезную статью!

Скажите, пожалуйста, а как сделать тизерный блок 2 на 2 ?
- Надежда
  
  4 мая 2018 в 17:36
  
  Ответить
  
  Виталий, вопрос снимаю! При просмотре горизонтального баннера из 4 объяв на мобильнике он сам автоматически превратился в 2 на 2. Спасибо вам огромное — по вашей инструкции у меня все отлично получилось!
Сергей

16 июня 2018 в 14:04

Ответить

Здравствуйте, дополните пожалуйста статью, чтобы при наведении на баннер, ссылка например становилась другим цветом. И чтобы можно было разные части текста обращать в разные цвета под баннером при наведении на них курсора
Тарас

16 декабря 2018 в 20:48

Ответить

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

16 декабря 2018 в 21:24

Ответить

Не долго я радовался, пока сайт не завис, с хостинга посоветавали обратиться к разработчикам была ошибка. Удалив ваше объявление все вернулось на место. В чем причина?
- Виталий WP-R.ru
  
  16 декабря 2018 в 22:38
  
  Ответить
  
  Зависнуть сайт никак не мог, т.к. здесь html/css, а не php/js. Сами подумайте.
  По всей видимости вы сами что-то поместили внутри представленного кода свое, либо не закрыли тег и сайт не «завис», а просто не отрисовался. Будьте внимательны.
Алексей

30 декабря 2018 в 12:18

Ответить

в какой файл редактора wp необходимо добавить html код?
- Виталий WP-R.ru
  
  2 февраля 2019 в 01:59
  
  Ответить
  
  В HTML
Ольга

17 марта 2019 в 16:22

Ответить

Респект тебе, друг. А то замучилась бродить по интернету в поисках чего-то подобного.
Александр

21 марта 2019 в 21:47

Ответить

Добрый вечер. Подскажите как сделать рекламный блок для spa, что бы в исходном коде страницы не было текста и ссылок ?
- Виталий WP-R.ru
  
  22 марта 2019 в 11:41
  
  Ответить
  
  Не совсем понял что за spa.
  Ваше решение через js.
  Но Google уже видит скрипты. Яндекс тоже по идее. Так что смысла прятать особо нет.

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