Как в Blogger добавить шапку в мобильном шаблоне

В Блоггере есть несколько способов установки шапки (хедер) в блоге: с картинкой и без неё (будет видно только название и описание блога).

С картинкой можно установить шапку в трёх вариантах:

1. После названия и описания — будет видна картинка, название и описание блога, но в мобильной версии шаблона картинки не будет видно.
2. Вместо заголовка и описания — будет видна картинка и в мобильной, и десктопной версии, а вот заголовка и описания не будет видно. Нужно будет на шапке писать текст вручную.
3. И последний вариант: помещать описание под изображением — видна будет шапка и на мобильном устройстве, и на компьютере, но при этом названия блога не будет, нужно писать на шапке, а описание сместится под шапку блога.

Что выбирать — решать вам. Но, если вы желаете, чтобы в мобильной версии была видна и шапка изображение, и заголовок с описанием блога, то нужно в шаблоне сделать некоторые изменения. Решение нашла на блоге https://www.howtosolutions.net

Меняем код в шаблоне

Заходим в Тема - Изменить HTML. В шаблоне нажимаем Перейти к виджету и выбираем Header1.

В код шапки ищем первую строку <b:else/>. Под ней будет код похожий на приведенный ниже: 

<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>

          <div class='titlewrapper' style='background: transparent'>

            <h1 class='title' style='background: transparent; border-width: 0px'>

              <b:include name='title'/>

            </h1>

          </div>

          <b:include name='description'/>

        </div>

Это — примерный код шапки для настольной версии шаблона. Его нужно скопировать (у себя в шаблоне).

Далее поднимаемся немного вверх в шаблоне и находим 2 строки: 

<b:if cond='data:mobile'>

<div id='header-inner'>

Эти две строки не трогаем, а удаляем все отмеченное красным до </div>:

      <b:if cond='data:mobile'>

        <div id='header-inner'>

          <div class='titlewrapper' style='background: transparent'>

            <h1 class='title' style='background: transparent; border-width: 0px'>

              <b:include name='title'/>

            </h1>

          </div>

          <b:include name='description'/>

        </div>

Вместо удалённых строк вставляем код, который скопировали в своём шаблоне ранее.

Сохраняем шаблон и шапка-картинка появляется в мобильной версии блога.