Редактирование мобильного шаблона Blogger
28.11.11
Мобильный интернет, а вместе с ним и блоггинг, развиваются стремительными темпами, еще годик-другой и добрая половина трафика будет генерироваться мобильными пользователями. В виду такой актуальности расскажу про одну интересную и новую возможность системы Blogspot. Как вы, вероятно, помните когда мобильные шаблоны в Blogger только появились не было никакой возможности их редактировать (эту фичу можно было только включить или выключить). Но вот на днях у пользователей Blogspot такая возможность стала доступной!
Для того чтобы начать идем в админку → «Шаблон» → «Для мобильных устройств». Вызываем окно настройки (для этого кликаем на кнопку с шестеренкой (Gear)):
Обратите внимание, что теперь появилась возможность выбрать один из шести мобильных шаблонов (ранее был один — Simple). Кроме этого в списке появилась опция «дополнительно», выбрав которую вы можете настроить вид мобильного шаблона самостоятельно. Как это сделать? Вот вам несколько отправных точек.
Внешний вид мобильного шаблона
Теперь вы можете полностью настроить внешний вид мобильного шаблона на свое усмотрение. Body элемент мобильного темплейта начинается с кода:
Теперь вы можете полностью настроить внешний вид мобильного шаблона на свое усмотрение. Body элемент мобильного темплейта начинается с кода:
<body class='loading mobile'>Для того чтобы посмотреть элементы относящиеся к мобильному шаблону и изменить структуру, ищите:
<body expr:class='"loading" + data:blog.mobileClass'>
Для редактирования стилей — /* Mobile
.mobile .date-header {
text-decoration:underline;
}
Виджеты в мобильном шаблоне
Теперь у виджетов Blogger появилось новое свойство «mobile», которое может принимать состояние «default», «yes», «no» или «only».
По умолчания в мобильном шаблоне могу отображаться виджеты «Header», «Profile», PageList, «Adsense», «Attribution» и некоторые другие. Вы можете убрать любой из них изменив свойство «mobile» на «no», например:
<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>.Таким же образом вы можете наоборот добавить какой-нибудь видежет, например, архив. Для этого найдите:
<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>И добавьте свойство mobile=’yes’. Итоговый результат будет выглядеть вот так:
<b:widget id="BlogArchive1" mobile="yes" title="Blog Archive" type="BlogArchive">
Если вы хотите чтобы какой-то виджет отображался только в мобильно шаблоне используйте mobile=’only’.
Альтернативное содержимое виджетов в мобильном шаблоне
Некоторые виджеты слишком громоздки для мобильного шаблона, поэтому пользователям мобильных устройств можно показывать альтернативный контент. Для этого удобно использовать условие:
<b:if cond="data:blog.isMobile"/>Пример использования:
<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!-- Show a text link in mobile view.-->
<a href="http://www.blogger.com">
Powered By Blogger
</a>
<b:else/>
<!-- Show an image link in desktop view.-->
<a href="http://www.blogger.com">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>
</a>
</b:if></div>В данном случае мы показываем пользователя немобильного устройства виджет «Powered By Blogger» в виде логотипа, пользователь мобильного устройства видит лишь ссылку.
Удачных вам экспериментов и не забывайте делать бекап!