2014-05-09

Мобильный шаблон 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;
}

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

26 комментариев :

Денис Грозеско комментирует...

Проверяем в действии

Bekkhan Mutsuev комментирует...

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

Иванова Наталья комментирует...

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

Moshe комментирует...

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

Иванова Наталья комментирует...

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

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

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

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

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

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

Роман Иванов комментирует...

подскажите в какое место вставить

Иванова Наталья комментирует...

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

Роман Иванов комментирует...

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

Роман Иванов комментирует...

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

Иванова Наталья комментирует...

Роман, а вы добавлялм похожие сообщения через гаджет 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;'>
<!-- 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;'>
<!-- 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>


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

Роман Иванов комментирует...

нет я вставил код сразу в код сайта

Роман Иванов комментирует...

код вот отсюда http://slivsol.blogspot.com/2013/02/vidzhet-pohozhie-soobscheniya-bez-miniatyur-dlya-blogger.html

Иванова Наталья комментирует...

Роман, попробуйте добавить вторую часть кода из записи<!--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. Один код у вас уже добавлен. Не забудьте сделать резервную копию перед изменениями.

Роман Иванов комментирует...

Наталья вставил как Вы сказали ничего не изменилось...

Иванова Наталья комментирует...

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

Иванова Наталья комментирует...

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

Роман Иванов комментирует...

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

Evgenia Dolinenko комментирует...

Спасибо, очень полезная статья!

Alexander Fedyunin комментирует...

Спасибо, помогло сделать то что хотел, очень понятно объясняется в видео как работать!

Роман Иванов комментирует...

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

Иванова Наталья комментирует...

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

Роман Иванов комментирует...

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

Иванова Наталья комментирует...

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

Сергей комментирует...

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

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

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

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

Иванова Наталья комментирует...

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

Denis Grozesco комментирует...

Спустя годы комментурю снова) но последним комментом)

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML