Баннер AdSense в шапке Blogger. И не только.

Ради эксперимента поместил баннер google AdSense в шапку блога. Если в дальнейшем вдруг появятся рекламодатели, можно будет заменить. В принципе, аналогичным способом можно вставить, скажем, картинку или еще что-то. Ну и, соответственно, запишу процесс установки, чтобы в будущем не искать долго. В этом случае свой блог — отличная штука, все заметки под рукой.

Я уже, честно говоря, не сразу вспомню, какие изменения производил с шаблоном блогспота, так что иногда возвращаюсь к своим записям, и все сразу становится ясным. Большую часть информации почерпнул на блоге Натальи Митрофановой "Шпаргалка блоггера", остальное домыслил сам.

Первым делом переходим настройки blogger → шаблон → изменить html, и ищем такую строчку

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

И прямо над ней вставляем html-код

<b:section class='button' id='buttonsection' showaddelement='yes'/>

Размещением этого кода мы разрешаем на вкладке "Дизайн" добавлять гаджеты над заголовком блога. Смело нажимайте "Добавить гаджет", и вставляйте код google adsense в HTML/JavaScript. Посмотрите видео, где я произвел описанные выше действия:

Но это еще не все. Таким образом баннер отобразится по умолчанию над шапкой блога, а нам нужно в шапке. Нужно добавить css-стиль. Для этого нужно вставить где-нибудь после, например,

/* Header
----------------------------------------------- * /

такой код

#HTML2 {
width: 470px;
position: relative;
top: -20px;
left:47%;
z-index: 100;
display: inline-block;
}
#buttonsection{height: 0;}

в выделенном проставьте свои значения, чтобы выравнять баннер.

HTML2 — здесь вместо двойки подставьте номер от id вашего гаджета. Узнать его можно в шаблоне, под той строчкой, которую мы вставили в самом начале (выделен красным):

<b:section class='button' id='buttonsection' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='адсенс' type='HTML'/>
</b:section>

width — ширина баннера
top — отступ сверху
left — отступ слева.
Нужно будет поэкспериментировать, чтобы подогнать баннер по границам. В следующем видео показаны шаги по добавлению css-кода:

Ах да, можно также добавить css через дизайнер шаблонов блогспота, на вкладке дополнительно→добавить css.

Для того, чтобы баннер отображался на всех страницах, кроме главной, ищем в шаблоне код нашего гаджета, на сей раз поставив галочку "Расширить шаблоны виджета", и прописываем следующее условие (выделено жирным зеленым):

<b:widget id='HTML200' locked='false' title='' type='HTML'>

<b:includable id='main'><b:if cond='data:blog.url != data:blog.homepageUrl'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

</b:if>

  </b:includable>

</b:widget>

Не забудьте убрать код быстрой настройки гаджета из шаблона.

Вместо баннера на главной странице у меня картинка, вставленная аналогичным образом, методом добавления гаджета, просто вместо google adsense я вписал картинку. Код с условием выглядит в этом случае так:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
</b:widget>

Условие тут изменилось, приглядитесь внимательно, и вы поймете, что к чему. В первом случае у нас "Кроме главной", во втором — "Только на главной".

Как вам кажется, хорошо я объясняю? Спасибо за внимание!