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

Как в 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>
код 2
Вместо удалённых строк вставляем код, который скопировали в своём шаблоне ранее.
Сохраняем шаблон и шапка-картинка появляется в мобильной версии блога.
шапка-картинка появляется в мобильной версии блога

Ваши комментарии:

Комментарии со спамом удаляются.