Как вставить рекламу в блог на Blogger.com 2019

Как вставить рекламу в блог на blogger.com

Блоги созданные на Blogger в отличии от тех, которые были созданы в социальных сетях, например Вконтакте, Facebook, Twitter и т.д., позволяют нам вставлять разного роду рекламу. Существует очень много типов рекламных партнерок, например Баннеры, Контекст, Тизеры, CPA (оплата за действия), Adult в общем рекламы просто валом бери и выбирай, что больше нравится.

Каждая реклама имеет свой HTML код, будь то простая ссылка или динамический, анимационный баннер. Самый простой способ его размещения в блоггере это добавление нового гаджета.

Как вставить рекламу в блог на blogger.com в боковые панели

1 Перейдите в раздел Дизайн
2 Добавьте новый гаджет
3 В списке гаджетов выберите HTML/Javascript
4 В появившемся окне вставьте HTML код рекламы
5 Сохраните гаджет

В зависимости от партнерки может понадобиться несколько минут для активации рекламного объявления, после чего оно начнет отображаться в вашем блоге.

Переходим к просмотру видео:


Как добавить рекламу в публикации

Просмотрев видео ниже вы узнаете, как добавлять рекламные объявления в начало, конец и внутри публикации.

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<div expr:id='&quot;zet1&quot; + data:post.id'/>
<div class='googlezet'>
ВСТАВЬТЕ ЗДЕСЬ РЕКЛАМНЫЙ КОД 
</div>
<div expr:id='&quot;zet2&quot; + data:post.id'><div id='post-toc'><p><data:post.body/></p></div></div>
<script type='text/javascript'>
var obj0=document.getElementById(&quot;zet1<data:post.id/>&quot;);var obj1=document.getElementById(&quot;zet2<data:post.id/>&quot;);var s=obj1.innerHTML;var t=s.substr(0,s.length/1.5);var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;);if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+0);}
  </script> </b:if>

Переходим к просмотру видео:


Как вставить рекламу в фид (лента новостей)

Чтобы увеличить процент отдачи от рекламы следующим делом я рекомендую вам установить рекламные блоки в ленте новостей, а точнее между сообщениями. Google Adsense уже давно разработал объявления, которые должным образом подстраиваются под тип ленты каждого блога. Само собой вы можете добавлять объявления и других партнерских программ.

Установка рекламы в фиде старых тем Blogger

Для размещения рекламных блоков в фиде старых тем Blogger используйте код ниже, а так же следуйте указаниям из видео:


<b:loop values='data:posts' var='post' index='number'>
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:number==1'>
<div class='post'>
ВСТАВЬТЕ ЗДЕСЬ РЕКЛАМНЫЙ КОД
</div>
</b:if>
<b:if cond='data:number==3'>
<div class='post'>
ВСТАВЬТЕ ЗДЕСЬ РЕКЛАМНЫЙ КОД
</div>
</b:if>
</b:if>

Установка рекламы в фиде новых тем Blogger

Для новых шаблонов Blogger используем следующий код:

<b:if cond='data:post.adNumber == 1'>
<div class='post-outer'>
ВСТАВЬТЕ ЗДЕСЬ РЕКЛАМНЫЙ КОД
</div>
</b:if>

CSS для Темы Emporio

<style>
div.widget.Blog .post-outer {
    padding-bottom: 0;
    border-radius: 0px;
    float: left;
    overflow: hidden;
    -webkit-transition: .3s box-shadow cubic-bezier(.4,0,.2,1);
    transition: .3s box-shadow cubic-bezier(.4,0,.2,1);
    width:100%; 
    max-width: 385px;
    margin-bottom: 15px;
    margin-top: 0;
    margin-right: 15px;
    margin-left: 0;
}
</style>

CSS для Contempo
Чтобы в теме Contempo сделать разрыв между нижней частью объявления и верхней частью сообщения добавьте следующий CSS код:

.post-outer { margin-bottom: 20px; }

Переходим к просмотру видео:



Создание и установка на сайт своего баннера

По лычному опыту могу сказать, что порой требуется создать собственный рекламный баннер , чтобы рекламировать различные партнерки и тем самым не быть заблокированным расширением Adblock.

Конечно в сети есть много сервисов позволяющие это сделать, но во-первых долго разбираться, что к чему, во-вторых могут запросить регистрацию на сайте для получения самого баннера и в третьих такие сервисы могут влепить в ваш баннер ссылку на свой сайт. Хотя один плюс в них все таки есть, если вы не дружите с графическими редакторами там вы сможете легко настроить фоновую картинку баннера. С нашим баннером таких проблем не возникнет. Зная, что самым популярным форматом является 728 * 90 пикселей выбрали именно его. Но его можно легко изменить задав нужные параметры ширины и высоты. Вот результат.

Преимущества баннера:

  1. Адапитвный дизайн - хорошо для пользователей мобильных устройств.
  2. Есть кнопка "Закрыть - Close", пользователь в любой момент может скрыть его.
  3. Плавающий дизайн - постоянно на виду, то есть при прокрутке страницы не прячется, повышая таким образом процент пробива.


Для установки нужно перейти в раздел Шаблон - Изменить HTML находите код </body> и перед ним вставляете следующий код:

<script type='text/javascript'>
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id='fixedban' style='width:100%;margin:auto;text-align:center;float:none;overflow:hidden;display:scroll;position:fixed;bottom:0;z-index:999;-webkit-transform:translateZ(0);'>
<div><a id='close-fixedban' onclick='document.getElementById(&apos;fixedban&apos;).style.display = &apos;none&apos;;' style='cursor:pointer;'><img alt='close' src='http://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif' title='close button' style='vertical-align:middle;'/></a></div>
<div style='text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto'>
<a href='#' title='Купить кота'><img style='max-width:100%;height:auto;vertical-align:middle;' alt='Купить кота' src='http://3.bp.blogspot.com/-9h86Fhn6zZU/VhtxRDTM4qI/AAAAAAAADK0/fQN3Z00kWwk/s1600/arlina-tea.png'/></a>
</div>
</div>

Параметры выделенные желтым выставляете по собственному желанию:
max-width - ширина баннера;
href= '#' - вставляете ссылку на рекламированный сайт
img style - 'max-width:100%; height:auto;' - задаете ширину и высоту

Сохраняете шаблон и проверяете результат.

Материал по теме

Так же я рекомендую вам ознакомиться с несколькими статьями по данной теме:

где лучше разместить рекламу на сайтеГде на сайте лучше всего разместить рекламу

Как увеличить прибыль AdsenseКак увеличить доход от рекламы Adsense 2018



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

3 Коммент.

Оставить комментарий
avatar
Dexter-Razbor
августа 20, 2019

>просто валом бери

Почему-же у Вас здесь на сайте нет рекламы? Или, выражаясь по-другому, почему только от Гугла, который перекрывает мой AdBlocker? И что можно заработать если даже гугловская реклама элементарно не показывается?

Ответить
avatar
Mark Korvin
августа 21, 2019

Каждый выбирает то, что ему подходит больше всего. На данном сайте мне больше всего подходит Адсенс. - https://www.shablonu-dlya-blogger.ru/2019/02/monetizatsiya-molodogo-bloga-v-detalyah.html

Ответить
avatar
Mark Korvin
августа 21, 2019

Что можно заработать с адсенс: в среднем за 100 посетителей от 1 цента до 1 доллара в день.

Ответить