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

Посмотрим как добавить в шапку Blogger гаджет HTML/JavaScript, куда в свою очередь можно вставить сторонний код, например, код баннера рекламодателя или форму поиска Яндекса.

Пункт 1. На вкладке "Шаблон" без указания галочки "Расширить шаблоны виджета" код 

      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ВАШЕ_НАЗВАНИЕ (заголовок)' type='Header'/>
</b:section>
нужно заменить на 
      <b:section class='header' id='header'>
<b:widget id='HTML999' locked='false' type='HTML'/>
<b:widget id='Header1' locked='true' title='ВАШЕ_НАЗВАНИЕ (заголовок)' type='Header'/>
</b:section>

Пункт 2. На вкладке "Дизайн" над блоком заголовка появится гаджет "HTML/JavaScript". Заполняем его.

Пункт 3. На вкладке "Шаблон" без указания галочки "Расширить шаблоны виджета" перед ]]></b:skin> пишем CSS: 

#header {position: relative;}

#HTML999 {
  z-index: 200;
  position: absolute;
  top: 5%;  /* отступ сверху */ 
  right: 0;  /* отступ справа */
}
Путём подбора значений top и right добиваемся нужного положения. Подробнее про CSS наложение.
в f t
наверх ↑

72 комментария:

Иван
Наталья, второй код с нтмл не принимает шаблон... Хочу ещё спросить, как можно сделать адсенс между постом и комментариями - как у Вас. Но сторого выравнивание по центру!
NMitra
id='HTML200' должен быть уникальным и не повторяться более в шаблоне.

По-поводу AdSense (http://shpargalkablog.ru/2010/07/adsense-s-nulya.html): text-align: center;
Но выравнивание будет в рамках сообщения без боковушек с гаджетами. Иначе можно подогнать в ручную, воспользовавшись свойствами
margin:верх%, право%, низ%, лево%;
padding:верх%, право%, низ%, лево%;
Иван
Ок, спасибо, будем пробовать)))
XaSeR
А как внесенный баннер выровнять по правому краю? Пробовал через CSS - не получилось.
NMitra
left: -10px; заменить на необходимое значение.
skunk-anansie
а у меня такой вопрос , как добавить в header кнопки для подписки , типа rss email и тд, заранее спасибо
NMitra
См. "Баннеры от AdSense". Там мы создаём гаджет HTML/JavaScript, куда и добавляем коды кнопок. С помощью позиционирования располагаем в нужное место.
skunk-anansie
спасибо
Starkkk
Где лучше всего располагать банеры если созданный блог больше не нужен, дабы максимально увеличить доход.
NMitra
В тексте статьи или всплывающие окна.
Starkkk
Подробней пожалуйста
NMitra
Я не рассматривала этот вопрос. Задайте запрос в поиск "биржа pop-up". На многих сайтах можно найти информацию о соответствующих партнёрках, например, http://partner-programm.ru/ или блоге Сосновского.
Starkkk
Не знаете как сделать так?
http://adsense-ru.blogspot.com/2011/11/blog-post.html
victorashu
Где я могу найти этот шаблон? http://football-russia.blogspot.com/
NMitra
Starkkk, посмотрите здесь - http://shpargalkablog.ru/2010/07/adsense-s-nulya.html, а именно adsense-"Мои объявления"-"Стили объявлений", если мной был правильно понят вопрос.

victorashu, не узнавала, можете поинтересоваться у автора проекта :))
Marina Varzhainova
Наташа, подскажите мне еще и в этой теме. Вставила банер как виджет, все отлично, вставился :) На главной все ок, а если зайти в какую-то статью, то название блога уходит чуть вниз если сравнивать с главной. Понимаю что это не критично особо, но я это вижу и немного раздражает. Не подскажите как исправить? И как убрать полоску ссылки под банером?

PS Простите меня если что, мне уже стыдно у вас сто-то спрашивать :)
NMitra
Линию высоты нужно выравнивать line-height либо padding. Замените тег p с id="zagolovok" на div.
Николай Иванов
Здравствуйте, скажите пожалуйста, насколько эффективен баннер адсенс в шапке блога?
NMitra
Переходы есть, но думаю из-за широкого формата.
Николай Иванов
обязательно использовать display: inline-block? в firefox у меня почему-то некоррекно работает, свинуто немного влево.
NMitra
Стили могут быть совершенно разными. За положение блока отвечает

position: relative;
top: 140px;
left: -10px;
Николай Иванов
по ходу, с шаблоном можно работать вечно. Нужно и меру знать.
NMitra
Да, верно )))
Елена.
Наталья, здравствуйте! Двигаюсь потихоньку с Вашей помощью. Застряла на том,что гаджет "Картинка" в дизайне стал плавающий, такой сам по себе. Понимаю,что сама что-то натворила, а что фиг знает))). Ошибочка есть,найти не могу.Извините опять за беспокойство.Если время у Вас появиться,может быть сможете заглянуть сюда???? http://www.smozem.ru
NMitra
Проверяйте этот участок, хотя могу ошибаться:

#header {
hackground: transparent url(http://3.bp.blogspot.com/_ebKrCj8TLPk/TQqQM2MIxqI/AAAAAAAABJo/BP49towAqfI/s1600/
Logo-Blogger.png) no-repeat top left;
height: 215px;
margin: 0%;
position: relative;
width: 1100px;
border-bottom: 2px redge #ebe0c7;
}
Елена.
Все сделала. Спасибо Вам бесконечное...
Patrician
Интересно какие сервисы баннерной рекламы Вы бы посоветовали?
NMitra
Я не много пробовала (выбрала по просмотрам, а не по кликам), но то, что некоторое время висело мне не понравилось. Баннеры имеет смысл устанавливать, когда численность превышает где-то 300-500 и выше человек.
Игорь
Спасибо админу полезная информация!
NMitra
Но не для пользователя WP )))
Админ
подскажите какой код нужно вставить, чтоб в шапке был не гаджет картинка, а гаджет яваскрипт???
NMitra
См. пункт "Баннеры от AdSense".
Админ
Спасибо все получилось... Не подскажите мне еще один момент? Я хочу удалить безвозвратно блок "заголовок блога", или же вставить в него вместо картинки партнерский баннер... а то у меня получается на его месте - пустое место))
Админ
Не отвечайте я разобрался.
Админ
И еще)))... Чет у меня при смене параметров: top и left не происходит изменение местоположения вставленного мною партнерского баннера...
NMitra
position: relative;
top: 0px;
left: -10px;

Добавьте ещё z-index, см. http://shpargalkablog.ru/2012/04/pozitsionirovaniye-css.html
KrediT
Спасибо очень помогли! Вообще у Вас всегда все статьи всегда интересные и полезные!
NMitra
Благодарю за добрый отзыв!
NMitra
Кстати, моё восхищение вашему сайту, всё по уму размещено.
Luiza Mkrtchyan
Помогите пож-та, хочу вставить html-код из Tak.ru на своей странице в blogger, но не понимаю как это сделать(( Может нужно зайти в -(шаблоны) -(изменить html) а дальше внизу страницы вставить код.??
NMitra
Сделайте указанные в статье шаги. Код Tak.ru нужно добавить в гаджет HTML/JavaScript, тот который вы создадите шагом выше.
Уважаемый Артём
Подскажите мне пожалуйста почему у меня на блоге ничего не получается переместить на нужное мне место.
http://www.siteswhereyoucanmakemoney.com/

На другом одностраничнике всё нормально получалось, а тут же нифига.

Хотел кнопки лайков поместить в нужное мне место.
NMitra
Я явных проблем не вижу.
Уважаемый Артём
#contents {position: relative;}

#HTML2 {
z-index: 200;
position: relative;
top: 240px;
left: -150px;
}

Можете подсказать что я не так делаю?
Любые значения вводишь оно не перемещается
NMitra
Что не помещается? Могу лишь предположить, что в CSS допущена ошибка, например, вот это что такое:

--></style>

Почему в CSS комментарии HTML? См. http://shpargalkablog.ru/2012/10/kommentarii-html-css-javascript-php.html
Уважаемый Артём
Что-то я совсем ничего не понял)
я походу что-то в общем коде изменил и у меня не применяются ни какие css.
NMitra
Потому что ошибки в CSS. Убирайте все элементы HTML.
Анонимный
Попытался вставить банер http://tamojnyasud.ru/ban.gif, теперь не могу его найти на сайте. Подскажите как его найти?
NMitra
Посмотрите как поиск по шаблону сделать http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html
Serega M
А я вот сделал так: maxwidgets='3' showaddelement='yes'
Псоле этого через дизайн добавляй что хочешь - просто и удобно! Чем вам такой способ не нравится? Проще ведь?
NMitra
Да, я тоже рассматривала этот вариант, уже не помню почему остановилась на том, что в статье и на этом http://shpargalkablog.ru/2010/07/adsense-s-nulya.html#blogger .
Luka
Спасибо разобрался , поставил с самый верх, только пришлось картинку подрезать подогнать в дизан чтобы входило сочетание.
Дмитрий
Не подскажите как сделать шапку прозрачной? Чтобы на ее месте фоновая картинка была видна? Очень нужно. Или как после удаления шапки сделать так, чтобы вверху было пустое место под фоновую картинку. Ну чтобы сделать отступ сверху без шапки вообще чтоб было.
NMitra
Адрес блога нужен. В целом удалите изображение из "Дизайн"-изменить "Заголовок"
Геннадий Фадеев
Можно просто maxwidgets=2 и все =) И можно добавить виджет через Дизайн
NMitra
Угу, верно. Но потом замучаешься объяснять где взять id
Hive Med
А можно ли разместить код под первым сообщением на главной? В какой участок кода шаблона его нужно вставить?
NMitra
Добавьте гаджет перед полем с Сообщением. Этому гаджету добавьте условие "только для Главной".
Hive Med
>только для главной
Это ?
>Добавьте гаджет перед полем с Сообщением
так он получается над первым сообщением, а мне нужно под (между первым и вторым)
Hive Med
>только для главной
Это
b:if cond='data:blog.url == data:blog.homepageUrl'
/b:if ?
NMitra
Невнимательно прочитала вопрос. Также по id ищите Сообщение http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html#del , но только добавляете свой код с другим уже условием. Меня смущает то, что код шаблона в результате этих действий будет несколько увеличен и в нём можно легко заплутать.
Hive Med
Да, с айди страниц получается проблематично. Поставлю тогда и правда над всеми сообщениями, но чтобы показывался только на главной. Жаль только, что после нажатия "Предыдущие" страница перестает быть главной, хотелось бы чтобы и там показывался.
NMitra
Условие <b:if cond='data:blog.pageType == "index"'>
Hive Med
Спасибо вам огромное!
Саша Дикий
Доброго времени суток! Подскажите, пожалуйста, как можно изменить высоту виджета....Я поместил баннер в правом верхнем углу, но отображается только половина:http://www.online-vkontakte.ru/
Всё перепробовал, не помогло, помогите, пожалуйста)))
NMitra
Доброго времени суток. Добавить

#header2 #HTML999 {
padding: 0;
}

Из

.menu-primary-container{float:right;position:relative;height:34px;background:none;z-index:400;padding:0;}

убрать height:34px;
Саша Дикий
спасибо) всё получилось!!!
Павел Угаров
Привет. Всё делал как описано, но хоть убей не могу сдвинуть баннер с места. Выручайте прям хз что делать.http://infaport.blogspot.ru/
NMitra
Привет,

#HTML999
заменить на
#HTML3
Павел Угаров
спасибо большое
voron- bes
спасибо.
NMitra
voron- bes, очень лаконично :) Пожалуйста