В данной статье я научу вас делать "тизерную" рекламу самостоятельно на своем сайте, что поможет вам увеличить доход и с 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%;
У меня вместо горизонтального блока получился вертикальный, хотя я все по-вашему делал. Почему так?
По всей видимости что-то не так сделали, либо у вас в шаблоне перебивает стили.
К сожалению, не видя ваш сайт и реализацию больше сказать нечего.
Добрый день, подскажите а как можно сделать горизонтальный рекламный блок вот такого плана http://prntscr.com/indgho с рандомным переходом между картинками?
Здравствуйте! Подскажите пожалуйста, как такой код:
custom(4, 36612228, 5564); custom(7, 87017382, 5564); custom(13, 9387086, 5564);
реализовать с помощью вашего плагина. Не могу разобраться! Заранее Вам благодарен.
Добрый день.
Вставить в поле плагина для кода.
Можете написать в тикеты техподдержке и вам наглядно покажут прямо у вас на сайте.
Здравствуйте, Виталий!
Спасибо за чрезвычайно полезную статью!
Скажите, пожалуйста, а как сделать тизерный блок 2 на 2 ?
Виталий, вопрос снимаю! При просмотре горизонтального баннера из 4 объяв на мобильнике он сам автоматически превратился в 2 на 2. Спасибо вам огромное — по вашей инструкции у меня все отлично получилось!
Здравствуйте, дополните пожалуйста статью, чтобы при наведении на баннер, ссылка например становилась другим цветом. И чтобы можно было разные части текста обращать в разные цвета под баннером при наведении на них курсора
Спасибо за статью, она мне очень помогла. Оставлю ваши тизеры у себя на сайте
Не долго я радовался, пока сайт не завис, с хостинга посоветавали обратиться к разработчикам была ошибка. Удалив ваше объявление все вернулось на место. В чем причина?
Зависнуть сайт никак не мог, т.к. здесь html/css, а не php/js. Сами подумайте.
По всей видимости вы сами что-то поместили внутри представленного кода свое, либо не закрыли тег и сайт не «завис», а просто не отрисовался. Будьте внимательны.
в какой файл редактора wp необходимо добавить html код?
В HTML
Респект тебе, друг. А то замучилась бродить по интернету в поисках чего-то подобного.
Добрый вечер. Подскажите как сделать рекламный блок для spa, что бы в исходном коде страницы не было текста и ссылок ?
Не совсем понял что за spa.
Ваше решение через js.
Но Google уже видит скрипты. Яндекс тоже по идее. Так что смысла прятать особо нет.
Здравствуйте. Мучает вопрос, как «обозвать» на сайте тизеры, что это реклама? И нужно ли вообще… Есть требования поисковиков по поводу реклов, особенно Гугла.
Добрый день.
Не понял вашего вопроса.