Ранее было рассмотрено как добавить изображение в заголовок 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/AVvXsEgCaVH2m86ZVmesbZ9Yt-wsX6WTZ_ZEeIqxMOMqjgkcp6xUs8q7mSjgsKSBKsffHqiSlRTd2opUqGjC9es4TpxkqFCV3uDObuW-x0WZuYE9I6w4DoBUB7lRtAMDen2aYSl0h__RIJ8jFMfo/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". Я предпочитаю первый вариант, поскольку там возможности выбора несколько шире.