How to insert a banner in your blog. Step-by-step instruction
One of the most popular and at the same time utopian tasks in e-commerce is to sell more and as painlessly as possible for the buyer. A person should think that he wants to buy it, and that the competent hands of a marketer are not slipping him into upselling. Advertising is very effective, but also very annoying. Its incredible amount and the attempts of every advertiser to highlight their ad have led to such phenomena as banner blindness, when a site visitor subconsciously ignores the flashing pictures on the sides. Fortunately, advert-developments do not stand still, so now we have native advertising that organically fits into the placement environment and performs the very task of e-commerce. Let's talk about her. It is good both for those who want to unobtrusively inform visitors about their promotional offers, and for those who are trying to make money on the site by placing someone else's ads. Have you seen how easy it is to post ads on your Facebook feed? So we thought that it would be useful for OkayCMS users to add a couple of natural ad units to their blog.
How to add evenly spaced banners to your blog
For example, you want your ad to jump through a certain number of positions in the article list:
Let's consider the options for inserting a block for a banner after 2, 4 and 8 news, because in the standard blog layout on the default Okai template, the row consists of 4 positions.
Follow our instructions and you will cope with it yourself. And if you suddenly cannot, technical support will help.
In order to make blocks with advertising on a blog, you need:
- Find file design / okay_shop / html / blog.tpl.
In OkayCMS 2.0 and higher , it can be accessed from the admin panel by this path: in the side menu on the left, select "Design" → template files → blog.tpl
In earlier versions , we also get into it from the admin panel: templates → the "Templates" tab at the top → blog.tpl
- You need to make the changes highlighted by comments to the file.
{* advertising_in_posts *} ……… .. {* / advertising_in_posts *}- insert a block every 2 articles:
{* 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'}- add a block every 4 articles:
{* 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'}- insert a block after 8 articles :
{* 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'}Banners appeared in the structure of the blog page. Now we need to correct the display, for this we proceed to the next step.
- In the same file design / okay_shop / html / blog.tpl add to the end of the document:
/ * 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 * /
Please note that these changes will be relevant only for the standard template , in other cases, when you try to make these changes, the layout may seriously suffer, or the .tpl and .css files will simply be different and deprive you of the opportunity to add these edits. Therefore, without a thorough knowledge of the front-end, do not try to put the article into practice. In this example, we tried to take into account the violations that can occur in the layout. However, if you notice errors, please let us know.
And those who understand well and feel the need to change the amount of news between ad inserts can use the following recipe:
in the construction $ iter% 2 == 0, replace the number 2 with the number of articles you need to skip before the banner.
Use this solution only if you can eliminate the effect of the floating layout.
When everything is done correctly, you will see something like this:
ad block after 4 articles (PC)
ad block after 2 articles (PC)
ad block after articles (tablet + mobile)
You can quickly create a banner without having professional design skills using online editors such as Canva. The main functionality and most of the images are free: find a suitable topic, add a button or text and you can upload it to the site or use it for advertising on external resources.