
Я уже, честно говоря, не сразу вспомню, какие изменения производил с шаблоном блогспота, так что иногда возвращаюсь к своим записям, и все сразу становится ясным. Большую часть информации почерпнул на блоге Натальи Митрофановой "Шпаргалка блоггера", остальное домыслил сам.
Первым делом переходим настройки blogger → шаблон → изменить html, и ищем такую строчку
Первым делом переходим настройки 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-стиль. Для этого нужно вставить где-нибудь после, например,
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-кода:
/* Header
----------------------------------------------- * /
такой код----------------------------------------------- * /
#HTML2 {
width: 470px;
position: relative;
top: -20px;
left:47%;
z-index: 100;
display: inline-block;
}
#buttonsection{height: 0;}
в выделенном проставьте свои значения, чтобы выравнять баннер.
width: 470px;
position: relative;
top: -20px;
left:47%;
z-index: 100;
display: inline-block;
}
#buttonsection{height: 0;}
HTML2 — здесь вместо двойки подставьте номер от id вашего гаджета. Узнать его можно в шаблоне, под той строчкой, которую мы вставили в самом начале (выделен красным):
<b:widget id='HTML2' locked='false' title='адсенс' type='HTML'/>
</b:section>
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 != ""'>
<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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
Условие тут изменилось, приглядитесь внимательно, и вы поймете, что к чему. В первом случае у нас "Кроме главной", во втором — "Только на главной".<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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
</b:includable>
</b:widget>
Как вам кажется, хорошо я объясняю? Спасибо за внимание!