Мобильный шаблон blogger

от Опубликовано
мобильный шаблон blogspot
Как настроить мобильный шаблон для блога на blogspot вы узнаете в этой статье.
Итак, первое, с чего нужно начать при настройки внешнего вида мобильного шаблона – это выбор темы.
Многие нестандартные шаблоны, особенно зарубежные, имеют адаптивный дизайн, т.е. совместимы с ПК, так и с гаджетами. Для того, чтобы выбрать шаблон для мобильного перейдите во вкладку Шаблон, далее нажмите иконку “шестеренку” под скриншотом мобильного шаблона:
мобильный шаблон блога
Выберите кнопку “Дополнительно” – так вы выберите мобильный шаблон, который прописан в коде вашей темы. Кнопка “Просмотр поможет вам посмотреть как выглядит ваш шаблон на мобильном устройстве.
мобильный шаблон blogspot
Если в вашей теме не предусмотрено мобильного шаблона, или он вам не нравится, то вы можете выбрать стандартный мобильный шаблон blogger из предложенных:

  • Простая,
  • динамический просмотр,
  • Венецианское окно,
  • Корпорация “Чудеса”,
  • Водяной знак,
  • Легкость,
  • Путешествие.

Настройка структуры мобильного шаблона

Как известно, не все гаджеты blogger отображаются в мобильном шаблоне. Отображаются по умолчанию лишь гаджеты:

  • Шапка (Header),
  • Записи блога (Blog),
  • Profile (Профиль),
  • PageList (Страницы),
  • Adsense,
  • Attribution.

Если вы хотите показать гаджеты в мобильном шаблоне blogger, которые скрыты по умолчанию, то допишите атрибут mobile='yes' в код гаджета:

<b:widget id='BlogArchive1' title='Blog Archive'  mobile='yes' type='BlogArchive'>

Для того, чтобы скрыть гаджет на мобильном допишите mobile='no' в код. Пример скрытия Attribution (ссылки на blogger) в мобильном шаблоне:

<b:widget id='Attribution1' locked='true'  mobile='no' title='' type='Attribution'/>

Если вы хотите, чтобы ваш гаджет был виден только в мобильной теме, то используйте mobile='only'. Так вы можете показать Attribution только в мобильном шаблоне:

<b:widget id='Attribution1' locked='true'  mobile='only' title='' type='Attribution'/>

или добавить рекламу от google adsense в мобильный шаблон (Читайте еще один способ вставки рекламы adsense на мобильную тему blogspot). Для этого вначале вам нужно перейти во вкладку “Прибыль” в административной панели blogspot и добавить рекламу в боковой панели блога (для рекламных блоков, расположенных между сообщениями этот трюк не работает!). Теперь перейдите в шаблон блога –> изменить html. Найдите виджет Adsense:
скрыть / показать виджеты в мобильном шаблоне
добавьте к коду виджета adsensemobile='only'. В результате у вас должно получиться:

<b:widget id='AdSense1' locked='false' title='' type='AdSense' mobile='only'>

Таким образом, вы можете совместить ручную вставку кода adsense в блог, реклама будет отображаться в нужных местах на компьютерах пользователей и при этом добавить рекламу и на девайсы.

Условные теги для мобильных тем blogger

Вы можете использовать условные операторы:

<b:if cond="data:blog.isMobile">
<!--   здесь код, который будет отображен в мобильном шаблоне  -->
<b:else/>
<!—код, который будет показан в desktop-версии блога-->
</b:if>

Настройки CSS для мобильных

Добавляем лишь класс mobile и прописывем нужные нам свойства в шаблон блога. Пример:

.mobile #sidebar-wrapper { /* Скрыть сайдбар в мобильной версии блога */
Display: none;
}

Расширенные настройки CSS

Прописываем свойства css в зависимости от размера экрана девайса:

@media screen and (max-width:1100px) { /* свойства css для максимального размера экрана 1100px*/
.sidebar-wrapper {
float: left;
}
}
@media screen and (max-width:1000px) { /* свойства css для максимального размера экрана 1000px*/
.main-wrapper { width: 66.8% }
    .sidebar-wrapper { width: 30% ; }
    .footer{
        width: 32%;
        margin-right: 2%;
    }
.metacom {
width: 100%;
}
  }
@media screen and (max-width:900px) {/* свойства css для максимального размера экрана 900px*/
.mobilemenu {
        left: 0;
        float: left;
        margin-top: 0;
        width: 100%;
    }
}
@media screen and (max-width:865px) { /* свойства css для максимального размера экрана 865px*/
.headerright {
    left: 0;  margin-right: 0;
}

Если у вас остались вопросы, то смотрите это видео:

Опубликовано Иванова Наталья

29 ответов к «Мобильный шаблон blogger»

  2. Здрасте)) чисто ради технического интереса создал блог tidam.org . Вопрос : когда добавояю видео с ютубе , то показывает только в расширенном формате. Не в мобильной версии не через айпэд это дело не идет 🙁 в чем может быть причина? Проверял меняя шаблоны. Не катит. За ранее спасибо

    Ответить

  3. Bekkhan Mutsuev, не совсем поняла про расширенный формат видео ютуб.
    Я специально зашла в ваш блог со смартфона. В мобильной версии вашего блога видео отлично показывает )

    Ответить

  4. Спасибо за материал. Я начинаю блог в blogger и ни чего не знаю о том как строить сайты. У меня возникла проблема с видео. Если я делюсь загруженным в блог видео на Facebook, то не появляется фрагмент видео в публикации. Может подскажите что делать?

    Ответить

  5. Moshe, попробуйте сделать следующее, если миниатюра записи не отображается у вас в Facebook:

    1. Шаблон блога -> изменить html
    здесь в самом начале кода найдите <html здесь может быть много другого кода…>

    и добавьте внутрь xmlns:og='http://ogp.me/ns#&#39;

    Получится что-то вроде:
    <html xmlns:og='http://ogp.me/ns#&#39; ……

    2. В шапку блога, т.е. после тега <head>

    добавьте
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
    <meta content='article' property='og:type'/>
    </b:if>
    <meta expr:content='data:blog.title' property='og:site_name'/>
    <b:if cond='data:blog.postImageThumbnailUrl'>
    <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
    <b:else/>
    <meta content='http://www.your-blog-logo.jpg' property='og:image'/>
    </b:if>
    <b:if cond='data:blog.metaDescription != &quot;&quot;'>
    <meta expr:content='data:blog.metaDescription' name='og:description'/>
    </b:if>
    <meta content='App-ID' property='fb:app_id'/>
    <meta content='Facebook-Profile-ID' property='fb:admins'/>

    3. В коде выше перед вставкой нужно будет сделать некоторые изменения — заменить выделенное жирным на ваши значения. Так, http://www.your-blog-logo.jpg — адрес логотипа вашего блога,
    — App-ID — это значение, которое вы найдете на странице https://developers.facebook.com/tools/debug/
    введите адрес вашего блога и нажмите кнопку "Debug"
    Результаты: в самом низу страницы вы увидите строчку — Graph API https://graph.facebook.com/10150700592354771, где цифры и будут вашими App-ID,
    — Facebook-Profile-ID — это ID вашего профиля на facebook

    Напишите о ваших результатах.

    Ответить

  7. Что именно, Роман? Коды, которые я предлагаю в записи нужно менять в шаблоне, а не вставлять их туда. Опишите, что именно вы хотите сделать, и я тогда попробую вам помочь.

    Ответить

  8. вот этот код, который указа у вас "то допишите атрибут mobile='yes' в код гаджета:" <b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

    Ответить

  9. у меня гаджет "похожих сообщений". он работает нормально на сайте, но в мобильной версии не показывает, хочу чтобы он работал и в мобильной версии сайта. вот с чем связан вопрос.

    Ответить

  10. Роман, а вы добавлялм похожие сообщения через гаджет HTML / JavaScript?
    Если да, то найдите код этого гаджета, который будет выглядеть примерно так:
    <b:widget id='HTML1' locked='false' title='Следуй за мной!' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url != &quot;http://www.mycrib.ru/p/logo.html&quot;'&gt;
    <!— only display title if it's non-empty —>
    <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'>
    <data:title/>
    </h3>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:if>
    </b:includable>
    </b:widget>

    и допишите в него mobile='yes'

    У вас получится:
    <b:widget id='HTML1' locked='false' title='Следуй за мной!' mobile='yes' type='HTML'>
    <b:includable id='main'>
    <b:if cond='data:blog.url != &quot;http://www.mycrib.ru/p/logo.html&quot;'&gt;
    <!— only display title if it's non-empty —>
    <b:if cond='data:title != &quot;&quot;'>
    <h3 class='title'>
    <data:title/>
    </h3>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>
    </b:if>
    </b:includable>
    </b:widget>

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

    Ответить

  13. Роман, попробуйте добавить вторую часть кода из записи<!—Remove—><b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop>
    <script type='text/javascript'>
    var maxresults=7;
    removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
    </script>
    </div>
    <!—Remove—></b:if>

    добавить 2 раза в шаблон — по одному после каждого <div class='post-footer-line post-footer-line-1'>

    P.S. Один код у вас уже добавлен. Не забудьте сделать резервную копию перед изменениями.

    Ответить

  15. Роман, у меня в стандартном шаблоне получилось именно так. Тогда пришлите код вашего шаблона (можно через обратную связь) или вставьте ссылку на ваш шаблон в комментарии. Попробую разобраться.

    Ответить

  16. Роман, я получила ваше письмо. Вы не настроили мобильный шаблон, как написано в начале этой статьи. Для этого во вкладке Шаблон -> Мобильный шаблон -> выбрать мобильный шаблон — Дополнительно. Тогда все получиться именно двойной вставкой кода после каждого <div class='post-footer-line post-footer-line-1'>

    Ответить

  17. нет Наталья, у меня все включено и мобильный шаблон в том числе…В мобильной версии сайта показывает контент, а гаджет похожих сообщений который встроен в код сайта не показывает. вот и вся петрушка…

    Ответить

  20. У меня адаптивный шаблон адсенд на мониторе компьютера показывает нормально в правой боковой панели, показывает и на мобильном устройстве только внизу страницы. Правда проблемка — сама реклама от гугл кривая, получается в мобильной версии она немного больше чем сама страница. т.е. получается криво. Как исправить?

    Ответить

  21. Роман, можно переделать блок адсенс- выбрать адаптивный вариант. Тогда он будет подстраиваться под ширину экрана монитора. Если же вам важен точный размер блока в десктопной версии, то можно сгенерировать для разные блоки для мобильной и ПК-версии шаблонов и с помощью атрибутов, описанных в этой статье ограничить показ этих блоков.

    Ответить

  22. Дело в том, что он у меня уже адаптивный. Поэтому я и не пойму почему он на мобильном (проверял разные устройства) не совсем подстраивается под экран мобильника. Что только не перепробывал, вроде платформа блогспот должна все подстраивать а криво получается…

    Ответить

  23. Роман, проблемы могут быть из-за шаблона блога, если не настроена ширина контейнеров сайта при разных разрешениях экрана. Вы можете найти ответ на свой вопрос в справке Adsense здесь. Там же, перейдя по сылкам вы найдете и более подробное описание решение проблемы с адаптивностью рекламных блоков.

    Ответить

  24. Наталья, нужна Ваша помощь
    Я вставил атрибут mobile='yes' в код:

    Но,при нажатии "ПРОСМОТР", появляется вот такое сообщение:

    _ Не удалось загрузить шаблон: Ошибка при синтаксическом анализе XML (строка 2552, столбец 79): Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".

    Подскажите, пожалуйста, что я делаю не так?

    Ответить

  25. Сергей, при вставке атрибута не может возникнуть такой ошибки. Значит, вы случайно исправили что-то еще. Ошибка говорит о том, что элемент b:widget должен заканчиваться на </b:widget>
    Я уже много раз вставляла в виджеты такие атрибуты, проблем не возникало.
    Попробуйте еще раз.

    Ответить

  28. Эдуард, конечно можно. Добавляйте счетчик в виджет HTML/JavaScript и изменяйте код виджета так, чтобы он отображался в мобильной версии блога.

    Ответить

  29. Наталья, я про те мобильные темы, что вшиты. Шаблон не стандартный, поэтому при выборе Дополнительно блог не адаптируется под моб. версию. Вшитых css просто нет в коде, они ведь на js все лежат. Пробовал конечно прописывать атрибут, который разрешает отображение, у многих виджетов, но ничего не меняется на телефоне.

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *