<
  • Главная
Статьи

Як вставити банер в блог. Покрокова інструкція

  1. Для того щоб зробити блоки з рекламою в блозі потрібно:

Одна з найбільш затребуваних і одночасно утопічних завдань в e-commerce - продавати більше і якомога безболісніше для покупця. Людина повинна думати, що це він хоче купити, а не йому підсовують допродажу грамотні руки маркетолога. Реклама - дуже ефективний спосіб, але і вельми дратівливий. Її немислиму кількість і спроби кожного рекламодавця виділити своє оголошення привели до таких явищ, як банерна сліпота, коли відвідувач сайту підсвідомо ігнорує миготливі картинки з боків. На щастя, і advert-розробки не стоять на місці, тому зараз ми маємо нативную рекламу, органічно вписується в середу розміщення, і виконує ту саму задачу інтернет-комерції. Про неї і поговоримо. Хороша вона і для тих, хто хоче ненав'язливо повідомити відвідувачам про своїх акційні пропозиції, і для тих, хто намагається заробити на сайті, розміщуючи чужу рекламу. Бачили, як легко лягають оголошення в стрічці Фейсбуку? Ось і ми подумали, що користувачам 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"} {$ canonical = "/ blog" scope = parent} {else} {$ canonical = "/ news" scope = parent} {/ if} {* The page heading *} <h1 class = "h1"> <span data-page = "{$ page-> id}"> {$ page-> name | escape} </ span> </ h1> {* The list of the blog posts *} <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="{$lang_link}{$smarty.get.type_post}/{$post-> url} "> {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 = "{$ post-> name | escape}" title = "{$ post-> name | escape}"> {/ if} </a> <div class = "blog_content"> {* The post name *} <div class = "h5"> <a href = "{$ lang_link} {$ sma rty.get.type_post} / {$ post-> url} "data-post =" {$ post-> id} "> {$ post-> name | escape} </a> </ div> {* The post date *} <div class = "blog_date"> <span> {$ post-> date | date} </ span> </ div> {* The short description of the post *} {if $ post-> annotation} < div class = "blog_annotation"> {$ post-> annotation} </ div> {/ if} </ div> </ div> {* advertising_in_posts *} {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"} {$ canonical = "/ blog" scope = parent} {else} {$ canonical = "/ news" scope = parent} {/ if} {* The page heading *} <h1 class = "h1"> <span data-page = "{$ page-> id}"> {$ page-> name | escape} </ span> </ h1> {* The list of the blog posts *} <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="{$lang_link}{$smarty.get.type_post}/{$post-> url} "> {if $ post-> image} <img class =" blog_img "src = "{$ post-> image | resize: 360: 360: false: $ config-> resized_blog_dir}" alt = "{$ post-> name | escape}" title = "{$ post-> name | escape}" > {/ if} </a> <div class = "blog_content"> {* The post name *} <div class = "h5"> <a href = "{$ lang_link} {$ smarty.get.type_post} / {$ post-> url} "data-post =" {$ pos t-> id} "> {$ post-> name | escape} </a> </ div> {* The post date *} <div class =" blog_date "> <span> {$ post-> date | date } </ span> </ div> {* The short description of the post *} {if $ post-> annotation} <div class = "blog_annotation"> {$ post-> annotation} </ div> {/ if} </ div> </ div> {* advertising_in_posts *} {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"} {$ canonical = "/ blog" scope = parent} {else} {$ canonical = "/ news" scope = parent} {/ if} {* The page heading *} <h1 class = "h1"> <span data-page = "{$ page-> id}"> {$ page-> name | escape} </ span> </ h1> {* The list of the blog posts *} <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="{$lang_link}{$smarty.get.type_post}/{$post-> url} "> {if $ post-> image} <img class =" blog_img "src = "{$ post-> image | resize: 360: 360: false: $ config-> resized_blog_dir}" alt = "{$ post-> name | escape}" title = "{$ post-> name | escape}" > {/ if} </a> <div class = "blog_content"> {* The post name *} <div class = "h5"> <a href = "{$ lang_link} {$ smarty.get.type_post} / {$ post-> url} "data-post =" {$ pos t-> id} "> {$ post-> name | escape} </a> </ div> {* The post date *} <div class =" blog_date "> <span> {$ post-> date | date } </ span> </ div> {* The short description of the post *} {if $ post-> annotation} <div class = "blog_annotation"> {$ post-> annotation} </ div> {/ if} </ div> </ div> {* advertising_in_posts *} {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 . Основний функціонал і велика частина зображень безкоштовні: знайдіть відповідне по тематиці, додайте кнопку або текст і можете викладати на сайт або використовувати для реклами на зовнішніх ресурсах.

Бачили, як легко лягають оголошення в стрічці Фейсбуку?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью