Как вставить баннер в блог. Пошаговая инструкция
Одна из самых востребованных и одновременно утопичных задач в e-commerce – продавать больше и как можно безболезненнее для покупателя. Человек должен думать, что это он хочет купить, а не ему подсовывают допродажи грамотные руки маркетолога. Реклама – очень эффективный способ, но и весьма раздражающий. Её немыслимое количество и попытки каждого рекламодателя выделить своё объявление привели к таким явлениям, как баннерная слепота, когда посетитель сайта подсознательно игнорирует мигающие картинки по бокам. К счастью, и advert-разработки не стоят на месте, потому сейчас мы имеем нативную рекламу, органично вписывающуюся в среду размещения, и выполняющую ту самую задачу интернет-коммерции. О ней и поговорим. Хороша она и для тех, кто хочет ненавязчиво сообщить посетителям о своих акционных предложениях, и для тех, кто пытается заработать на сайте, размещая чужую рекламу. Видели, как легко ложаться объявления в ленте Фейсбука? Вот и мы подумали, что пользователям OkayCMS будет полезно добавить в свой блог пару естественных рекламных блоков.
Как добавить баннеры в блог с равномерным промежутком
Например, Вы хотите, чтобы реклама проскакивала в списке статей через определенное количество позиций:
Рассмотрим варианты вставки блока для баннера через 2, 4 и 8 новостей, т.к. в стандартной схеме блога на дефолтном шаблоне Окаи ряд состоит из 4 позиций.
Следуйте нашей инструкции, и Вы справитесь с этим самостоятельно. А если вдруг не сможете, техподдержка окажет помощь.
Для того чтобы сделать блоки с рекламой в блоге нужно:
- Найти файл design/okay_shop/html/blog.tpl.
В OkayCMS 2.0 и выше в него можно попасть из админпанели по такому пути: в боковом меню слева выбираем «Дизайн» → файлы шаблонов → blog.tpl
В ранних версиях также попадаем в него из админки: шаблоны → вкладка «Шаблоны» вверху → blog.tpl
- В файл нужно внести изменения, выделенные комментариями.
{*advertising_in_posts*}………..{*/advertising_in_posts*}
- вставить блок через каждые 2 статьи:
{* The blog page template *}
{* The canonical address of the page *}
{if $smarty.get.type_post == "blog"}
<h1 class="h1"><span data-page="">
<div class="blog clearfix blogWrap">
{foreach $posts as $post}
{*advertising_in_posts*}
{$iter=$post@iteration}
{*/advertising_in_posts*}
<div class="blog_item no_padding col-sm-6 col-lg-4 {*advertising_in_posts*}col-xl-6 blogWrap__item{*/advertising_in_posts*}">
{* The post image *}
<a class="blog_image" href="/">
{if $post->image}
<img class="blog_img" src="{*advertising_in_posts*}{$post->image|resize:600:600:false:$config->resized_blog_dir}{*/advertising_in_posts*}" alt="" title="
<div class="h5">
<a href="/" data-post="">
<div class="blog_date"><span>
{if $post->annotation}
<div class="blog_annotation">
{if ($iter%2==0)}
<div class="adverBanner"></div>
{/if}
{*/advertising_in_posts*}
{/foreach}
</div>
{* Pagination *}
{include file='pagination.tpl'}
- добавить блок через каждые 4 статьи:
{* The blog page template *}
{* The canonical address of the page *}
{if $smarty.get.type_post == "blog"}
<h1 class="h1"><span data-page="">
<div class="blog clearfix blogWrap">
{foreach $posts as $post}
{*advertising_in_posts*}
{$iter=$post@iteration}
{*/advertising_in_posts*}
<div class="blog_item no_padding col-sm-6 col-lg-4 col-xl-3 {*advertising_in_posts*}blogWrap__item{*/advertising_in_posts*}">
{* The post image *}
<a class="blog_image" href="/">
{if $post->image}
<img class="blog_img" src="{$post->image|resize:360:360:false:$config->resized_blog_dir}" alt="" title="
<div class="h5">
<a href="/" data-post="">
<div class="blog_date"><span>
{if $post->annotation}
<div class="blog_annotation">
{if ($iter%4==0)}
<div class="adverBanner"></div>
{/if}
{*/advertising_in_posts*}
{/foreach}
</div>
{* Pagination *}
{include file='pagination.tpl'}
- вставить блок после 8 статей:
{* The blog page template *}
{* The canonical address of the page *}
{if $smarty.get.type_post == "blog"}
<h1 class="h1"><span data-page="">
<div class="blog clearfix blogWrap">
{foreach $posts as $post}
{*advertising_in_posts*}
{$iter=$post@iteration}
{*/advertising_in_posts*}
<div class="blog_item no_padding col-sm-6 col-lg-4 col-xl-3 {*advertising_in_posts*}blogWrap__item{*/advertising_in_posts*}">
{* The post image *}
<a class="blog_image" href="/">
{if $post->image}
<img class="blog_img" src="{$post->image|resize:360:360:false:$config->resized_blog_dir}" alt="" title="
<div class="h5">
<a href="/" data-post="">
<div class="blog_date"><span>
{if $post->annotation}
<div class="blog_annotation">
{if ($iter%8==0)}
<div class="adverBanner"></div>
{/if}
{*/advertising_in_posts*}
{/foreach}
</div>
{* Pagination *}
{include file='pagination.tpl'}
В структуре страницы блога появились баннеры. Теперь нужно подправить отображение, для этого переходим к следующему шагу.
- В том же файле design/okay_shop/html/blog.tpl дописать в конец документа:
/*advertising_in_posts */
.blogWrap
{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.adverBanner{
background-color: yellow;
float: left;
height: 200px;
width: 100%;
}
@media (max-width: 1199px)
{
.h1 {
border-bottom: none;
}
.blog_item {
box-shadow: none;
}
.blogWrap
{
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.blogWrap__item
{
width: 40% !important;
margin: 5px 10px;
border: 1px solid #e1e8ed;
}
.adverBanner
{
width: calc(80% + 20px);
margin: 10px 0;
}
}
@media (max-width: 767px)
{
.blogWrap__item
{
width: 100% !important;
}
.adverBanner
{
width: calc(100% - 20px);
margin: 10px 0;
}
}
/*/advertising_in_posts */
Обратите внимание, что данные изменения будут актуальны только для стандартного шаблона, в остальных случаях при попытке внести эти изменения, может серьёзно пострадать вёрстка, либо файлы .tpl и .css просто будут другими и лишат Вас возможности эти правки добавить. Поэтому, не имея основательных знаний во front-end, не пытайтесь применять статью на практике. В данном же примере мы постарались учесть нарушения, которые могут происходить в вёрстке. Всё же, если Вы заметите ошибки, просим сообщить нам.
А те, кто разбирается хорошо и испытывает необходимость изменить количество новостей между рекламными вставками, могут воспользоваться следующим рецептом:
в конструкции $iter%2==0 цифру 2 замените на такую, сколько статей нужно пропустить перед баннером.
Пользуйтесь таким решением, только если сможете устранить последствие поплывшей вёрстки.
Когда всё сделано правильно, Вы увидите приблизительно следующее:
рекламный блок после 4-х статей (ПК)
рекламный блок после 2-х статей (ПК)
рекламный блок после статей (планшет + мобильный)
Сделать баннер быстро, не обладая профессиональными навыками дизайнера, можно с помощью онлайн-редакторов, например, в Canva. Основной функционал и большая часть изображений бесплатны: найдите подходящее по тематике, добавьте кнопку или текст и можете выкладывать на сайт или использовать для рекламы на внешних ресурсах.