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

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

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

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

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

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

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

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

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

HTML<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 используйте код ниже, а так же следуйте указаниям из видео:

HTML
<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 используем следующий код:

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

CSS для Темы Emporio

CSS<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 код:

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyWUnx-oqQuHJMteNdIkcYBZA5NeYVXzJyKpKD6VMvy0h56KAIUPOIMxy56dB4LvqC7tIWoy7bHxHmjbU4kFaWE_0LNwUU1G9gxxq4CCzH5mXd88Z0IlE7oyUovPWA5lBon0qhws2YwPxa/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBt2LnNsDi79ZRqtlLK6ZW33gWoukuCmZQ-AOWxXA83T5u9eScWf3EuZAwU6OMPyg_sr_uA37TYerNTc1N3Y39i1Fnrn-X4c3So-HfKc8jqz_ZIRo9SEsIFzffsma9akeSRQvwdTkLcEMA/s1600/arlina-tea.png'/></a>
</div>
</div>

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

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

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

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

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

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

Mark Korvin марта 30, 2024 2 Коммент.

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

Facebook X Vkontakte

Рекомендуем