Как настроить мобильный шаблон для блога на 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;
} Если у вас остались вопросы, то смотрите это видео:
Проверяем в действии
Здрасте)) чисто ради технического интереса создал блог tidam.org . Вопрос : когда добавояю видео с ютубе , то показывает только в расширенном формате. Не в мобильной версии не через айпэд это дело не идет 🙁 в чем может быть причина? Проверял меняя шаблоны. Не катит. За ранее спасибо
Bekkhan Mutsuev, не совсем поняла про расширенный формат видео ютуб.
Я специально зашла в ваш блог со смартфона. В мобильной версии вашего блога видео отлично показывает )
Спасибо за материал. Я начинаю блог в 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 == "item"'>
<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 != ""'>
<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 != "http://www.mycrib.ru/p/logo.html"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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 != "http://www.mycrib.ru/p/logo.html"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var maxresults=7;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</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'>
нет Наталья, у меня все включено и мобильный шаблон в том числе...В мобильной версии сайта показывает контент, а гаджет похожих сообщений который встроен в код сайта не показывает. вот и вся петрушка...
Спасибо, очень полезная статья!
Спасибо, помогло сделать то что хотел, очень понятно объясняется в видео как работать!
У меня адаптивный шаблон адсенд на мониторе компьютера показывает нормально в правой боковой панели, показывает и на мобильном устройстве только внизу страницы. Правда проблемка - сама реклама от гугл кривая, получается в мобильной версии она немного больше чем сама страница. т.е. получается криво. Как исправить?
Роман, можно переделать блок адсенс- выбрать адаптивный вариант. Тогда он будет подстраиваться под ширину экрана монитора. Если же вам важен точный размер блока в десктопной версии, то можно сгенерировать для разные блоки для мобильной и ПК-версии шаблонов и с помощью атрибутов, описанных в этой статье ограничить показ этих блоков.
Дело в том, что он у меня уже адаптивный. Поэтому я и не пойму почему он на мобильном (проверял разные устройства) не совсем подстраивается под экран мобильника. Что только не перепробывал, вроде платформа блогспот должна все подстраивать а криво получается...
Роман, проблемы могут быть из-за шаблона блога, если не настроена ширина контейнеров сайта при разных разрешениях экрана. Вы можете найти ответ на свой вопрос в справке Adsense здесь. Там же, перейдя по сылкам вы найдете и более подробное описание решение проблемы с адаптивностью рекламных блоков.
Наталья, нужна Ваша помощь
Я вставил атрибут mobile='yes' в код:
Но,при нажатии "ПРОСМОТР", появляется вот такое сообщение:
_ Не удалось загрузить шаблон: Ошибка при синтаксическом анализе XML (строка 2552, столбец 79): Element type "b:widget" must be followed by either attribute specifications, ">" or "/>".
Подскажите, пожалуйста, что я делаю не так?
Сергей, при вставке атрибута не может возникнуть такой ошибки. Значит, вы случайно исправили что-то еще. Ошибка говорит о том, что элемент b:widget должен заканчиваться на </b:widget>
Я уже много раз вставляла в виджеты такие атрибуты, проблем не возникало.
Попробуйте еще раз.
Спустя годы комментурю снова) но последним комментом)
Здравствуйте, Наталья. А можно на адаптивной моб. версии добавить счетчики статистики?
Эдуард, конечно можно. Добавляйте счетчик в виджет HTML/JavaScript и изменяйте код виджета так, чтобы он отображался в мобильной версии блога.
Наталья, я про те мобильные темы, что вшиты. Шаблон не стандартный, поэтому при выборе Дополнительно блог не адаптируется под моб. версию. Вшитых css просто нет в коде, они ведь на js все лежат. Пробовал конечно прописывать атрибут, который разрешает отображение, у многих виджетов, но ничего не меняется на телефоне.
Супер! Существенно улучшилcя шаблон
Я рада, что вам пригодилось.
Огромное спасибо, все получилось!
Благодарю за Ваши публикации, воспользовался многими советами. Вопрос о настройке мобильной версии. Не устраивает, что в родном редакторе для "простых" тем только варианты, в которых сообщения в виде "анонсов" и для чтения нужно каждое открывать. 1. Можно ли, настроить мобильный шаблон так, чтобы публикации в нем были в обычном виде - вертикальной сплошной ленты (без анонса)? 2. Под заголовком "Условные теги для мобильных тем blogger" Вы привели код, который позволяет показывать только на мобильном устройстве - "blog.isMobile", а как прописать наоборот - только на десктоп? 3. В этой статье Вы показали "Как настроить мобильный шаблон" и "Настройки CSS для мобильных" - это два взаимосвязанных процесса или можно обойтись без перехода на нежеланную блоггеровскую версию мобильного шаблона и просто настроить самому из приведенных Вами настроек CSS (в зависимости от экранов девайсов)? Или обязательно надо подключить мобильный шаблон, иначе самостоятельные дальнейшие настройки CSS не сработают?