Как вставить баннер в блог. Пошаговая инструкция

Категории

Одна из самых востребованных и одновременно утопичных задач в e-commerce – продавать больше и как можно безболезненнее для покупателя. Человек должен думать, что это он хочет купить, а не ему подсовывают допродажи грамотные руки маркетолога. Реклама – очень эффективный способ, но и весьма раздражающий. Её немыслимое количество и попытки каждого рекламодателя выделить своё объявление привели к таким явлениям, как баннерная слепота, когда посетитель сайта подсознательно игнорирует мигающие картинки по бокам. К счастью, и advert-разработки не стоят на месте, потому сейчас мы имеем нативную рекламу, органично вписывающуюся в среду размещения, и выполняющую ту самую задачу интернет-коммерции. О ней и поговорим. Хороша она и для тех, кто хочет ненавязчиво сообщить посетителям о своих акционных предложениях, и для тех, кто пытается заработать на сайте, размещая чужую рекламу. Видели, как легко ложаться объявления в ленте Фейсбука? Вот и мы подумали, что пользователям OkayCMS будет полезно добавить в свой блог пару естественных рекламных блоков.

 

Как добавить баннеры в блог с равномерным промежутком

 Например, Вы хотите, чтобы реклама проскакивала в списке статей через определенное количество позиций:

баннер в блоге OkayCMS

 

Рассмотрим варианты вставки блока для баннера через 2, 4 и 8 новостей, т.к. в стандартной схеме блога на дефолтном шаблоне Окаи ряд состоит из 4 позиций.

 

Следуйте нашей инструкции, и Вы справитесь с этим самостоятельно. А если вдруг не сможете, техподдержка окажет помощь.

 

Для того чтобы сделать блоки с рекламой в блоге нужно:

  1. Найти файл design/okay_shop/html/blog.tpl.

В OkayCMS 2.0 и выше в него можно попасть из админпанели по такому пути: в боковом меню слева выбираем «Дизайн» → файлы шаблонов → blog.tpl

В ранних версиях также попадаем в него из админки: шаблоны → вкладка «Шаблоны» вверху → blog.tpl

 

  1. В файл нужно внести изменения, выделенные комментариями. 
{*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'}

В структуре страницы блога появились баннеры. Теперь нужно подправить отображение, для этого переходим к следующему шагу.

 

  1. В том же файле 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. Основной функционал и большая часть изображений бесплатны: найдите подходящее по тематике, добавьте кнопку или текст и можете выкладывать на сайт или использовать для рекламы на внешних ресурсах.

Пока нет комментариев
Ваш комментрарий будет первым :)
Написать комментарий
Войдите в личный кабинет
Скачать OkayCMS
version 4.5.0
Подписаться на рассылку
Вы будете получать подборку полезных статей по работе с сайтом на OkayCMS, скидки на модули и шаблоны