В данной статье я научу вас делать "тизерную" рекламу самостоятельно на своем сайте, что поможет вам увеличить доход и с 99% вероятности обойти с ней блокировку AdBlock.
Вы можете просто скопировать код и подменить данные на свои (картинки, ссылки, тексты). Все будет работать на любом сайте (не важно какая CMS или шаблон), в том числе при адаптивной верстке.
В данных тизерах вы можете рекламировать какой-то товар партнерок (чай, крема, гаджеты, игры и прочее). Вставлять подобные рекламные блоки на сайт удобно при помощи AdsPlace'r Pro или прямо в код шаблона. Можно использовать во всплывающих окнах Sociale'r. На ваш выбор.
Что именно мы создаем
Ниже будут примеры с пояснениями. Делать мы будем 2 вида тизеров:
- Горизонтальный - отлично подойдет для тела статьи (в начале, в середине или конце статьи).
- Вертикальный - обычно используют в сайдбаре, но иногда и в теле статьи.
Горизонтальный блок в ряд
Можете потягать за край браузера и посмотреть как блок меняется исходя из разрешения. Либо зайдите в статью с мобильника.
Какой-то заголовок рекламы №1
Какой-то заголовок рекламы №2 очень длинный-предлинный
Какой-то заголовок рекламы №3
Это тизерный блок, где у нас:
- 3 картинки, у каждой есть подпись.
- Каждый тизер (картинка+подпись) являются ссылкой на какую-то страницу (обернуты в ссылку).
Вот код HTML-разметки этого блока:
|
1 2 3 4 5 |
<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> |
Вы подменяете картинки, текст и адрес ссылки на свой. Можете добавить четвертый блок.
А теперь магия CSS (визуальное оформление). Здесь все сугубо индивидуально для каждого дизайна сайта. Но я вам дам все нужные параметры, которые могут пригодиться. Напротив каждого параметра есть пояснение, чтобы вы могли скорректировать дизайн под себя даже не обладая навыками в верстке.
У вас в шаблоне есть файл стилей style.css (точно есть в корне шаблона или в папке css). Так же в некоторых шаблонах предусмотрена возможность вставлять параметры css в специальное поле настроек этого шаблона. Владельцы плагина Sociale'r так же найдут в нем подобное поле.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.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 очень длинный-предлинный, с бородой. За него копирайтерам вы бы заплатили очень много.Какой-то заголовок рекламы №3
В данном случае разметка HTML немного изменилась: class для всего блока стал tizery-vr, чтобы отличался от горизонтального. Остальное идентично.
|
1 2 3 4 5 |
<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> |
А теперь магия CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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-разметку по сайту.
Безусловно, можно еще более стилизовать блоки. Но это уже будет индивидуально под каждый сайт и здесь всех вариантов предусмотреть не возможно.
Есть вопросы? Задавайте их в комментариях.
Хорошо написана статья!
Будет здорово, если будет время дополнить статью: как добавить эффект/эффекты наведения курсора на тизер. Заранее спасибо.
Подскажите а как можно сделать такого вида?
https://gyazo.com/ea48590820811ff430211b05e98f3009
И растягивалось по ширине страницы, буду признателен
Вертикальный блок из примера.
Добавьте для .tizery-vr параметр width:100%;
У меня вместо горизонтального блока получился вертикальный, хотя я все по-вашему делал. Почему так?
По всей видимости что-то не так сделали, либо у вас в шаблоне перебивает стили.
К сожалению, не видя ваш сайт и реализацию больше сказать нечего.