Приложение 1: Как добавить баннер в заголовок Blogger

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

Пункт 1. Переходим в "Дизайн"-"Изменить HTML" и, нажав комбинацию из CTRL+F, перед

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

вносим

<b:section class='button' id='buttonsection' showaddelement='no'>
<b:widget id='Image999' locked='false' title='' type='Image'/>
</b:section>

Добавить баннер в шапку блога на Blogger.

Пункт 2. На вкладке "Дизайн"-"Элементы страницы" над блоком с названием заголовка появится гаджет "Картинка". В нём нужно:

убрать флажок: Сжать до размеров экрана,
добавить адрес изображения, например, https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8zf5QPgmCSpS33vrkho9RsgQkv6FpCodfCgpMWF9jB_Rgv1V9T8GrWhHxgiKJDH_UIzw29gSA_hww29dGJBToGFpOmZQa_YjreW0rWBffkdimUJMbq5pNDVSdySqX0ppBT6IQxM0_ObqZ/s1600/kupit-bunner.png. Этот рисунок легко сделать в Фотошопе, путём использования инструментов "Карандаш" и "Горизонтальный текст" (горячая клавиша "T" на английском).
указать ссылку на страницу с расценками.

Гаджет "Картинка".

Пункт 3. А теперь определим в каком месте изображение должно находиться. Возвращаемся в "Дизайн"-"Изменить HTML". Перед ]]></b:skin> пишем:

#Image999{
width: 468px; 
position: relative;
top: 140px; 
left: -10px; 
z-index: 100;
display: inline-block;
}
 
#buttonsection{
height: 0;
}

,где width - ширина изображения,
top - отступ сверху,
left - отступ слева.
Путём подбора этих параметров добиваемся нужного положения.

Убрать белый фон вокруг изображения.

На мой взгляд, здесь тень несколько не кстати, поэтому в приблизительно таком коде:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 5px;
  background: #fff;

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

удаляем ".Image img,".

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

Какую цену назначить?

Рекламодатель платит за переходы с вашего ресурса или за время размещения баннера.

Цена зависит от двух параметров:

число показов, здесь нужно открыть доступ к некоторым пунктам статистики Liveinternet, связанным с количеством просмотров и числом посетителей,
тематика ресурса.

Ориентироваться стоит на конкурентов. Для SEO-блогов, это, скажем, сайт Шакина: за 6500 показов - 100 рублей.

Баннеры от AdSense.

Можно воспользоваться баннерной рекламой AdSense. Достаточно указать "Только графические/мультимедийные объявления". Оплата будет зависеть от кликов по ним. А при отсутствии "отечественных производителей" будет показана реклама иностранных компаний.

Предыдущий вариант кода мы несколько подкорректируем. Во время пункта 1, вносимым фрагментом будет:

<b:section class='button' id='buttonsection' showaddelement='no'>
<b:widget id='HTML200' locked='false' title='баннер' type='HTML'/>
</b:section>

А в пункте 3 заменим #Image999 на #HTML200.

Теперь в созданное пунктирное поле добавляем виджет "HTML/JavaScript" с необходимым скриптом, полученным в сервисе контекстной рекламы, либо гаджет "AdSense". Я предпочитаю первый вариант, поскольку там возможности выбора несколько шире.