2014-05-09

Textual description of firstImageUrl

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

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

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

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

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

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 комментирует...

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

Эдуард Сингилеев комментирует...

Здравствуйте, Наталья. А можно на адаптивной моб. версии добавить счетчики статистики?

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

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

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

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