Мобильная версия сайтов на Блоггер
Несколько дней решаю ошибки мобильной версии блога — интерактивные элементы расположены слишком близко, контент шире экрана, слишком мелкий шрифт. Нашлась и новая проблема — медленная скорость загрузки мобильного блога.
На одном сайте, по какой-то причине, отключилась мобильная версия, и я этого не замечала долгое время. Вполне возможно, некоторые ошибки могли быть из-за этого.
Ошибки — слишком мелкий шрифт исправлены полностью, а другие — почти все. "Отремонтировала" неожиданным способом — уменьшила большие фотографии в статьях (те, которые шире 600 px). Решение данной проблемы нашла в интернете на каком-то сайте, к сожалению, забыла этот ресурс положить в закладки, а теперь не могу найти. Скриншот исправления ниже:
Сегодня в статье решила подробнее коснуться темы мобильного блога. Я немного писала об этом в статье https://inshabashka.blogspot.com/2019/12/optimizaciya-bloga-na-blogger-urok-16.html. Но до конца тему не раскрыла.
Настройка мобильного сайта
Установить мобильную версию для сайта на Blogger несложно. Заходим в Тему, нажимаем на треугольничек на кнопке Настроить. В выпавшем меню выбираем Настройки для мобильных устройств.
1) В открывшемся окне нажимаем кнопку Для мобильных устройств.
2) Нажимаем на треугольник.
Для сайта можно выбрать любую тему из предложенных:Simple (Простая)
Dynamic (Динамический просмотр)
Picture Window (Венецианское окно)
Awesome Inc (Корпорация "Чудеса")
Watermark (Водяной знак)
Ethereal (Легкость)
Travel (Путешествие)
В телефоне будет выбранная вами тема. Обычные темы, без оформления.
По умолчанию — такая же тема, как и на ПК
Дополнительно — мобильный шаблон, который прописан в коде вашей темы. Оформление будет аналогичным, как для десктопной версии.
3) Нажимая треугольнички можно просмотреть все варианты тем.
4) Просмотреть мобильную тему можно, нажав Предварительный просмотр.
5) Если всё устраивает, не забудьте нажать кнопку Сохранить.
Так же в меню настройки имеется QR-код, чтобы можно было быстро и удобно проверять как будет выглядеть сайт на мобильном устройстве.
Настройки мобильного шаблона
В мобильной версии по умолчанию отображаются такие гаджеты:
- Шапка
- Записи блога
- Профиль
- Страницы
- Adsense
- Атрибуция
Если нужно показать другие гаджеты в мобильном шаблоне, то дописываем небольшой атрибут в код гаджета.
Для этого нажимаем Тема — Изменить XTML. В шаблоне открываем список гаджетов, выбираем нужный и добавляем в его код mobile='yes', например,
<b:widget id='Label' locked='false' title='' mobile='yes' type='Label'/>
Для того чтобы скрыть ненужный гаджет на мобильном, необходимо дописать в код mobile='no'.
<b:widget id='Attribution' locked='true' mobile='no' title='' type='Attribution'/>
Чтобы гаджет был виден только в мобильно шаблоне, то в код добавляем mobile='only'.
<b:widget id='AdSense' locked='true' mobile='only' title='' type='AdSense'/>
Что бы прописать нужные свойства в мобильный шаблон блога, добавляем к коду класс mobile.
Комментарии со спамом удаляются.