Редактирование мобильного шаблона Blogger

понедельник, 28 ноября 2011 г.
Мобильный интернет, а вместе с ним и блоггинг, развиваются стремительными темпами, еще годик-другой и добрая половина трафика будет генерироваться мобильными пользователями. В виду такой актуальности расскажу про одну интересную и новую возможность системы Blogspot. Как вы, вероятно, помните когда мобильные шаблоны в Blogger только появились не было никакой возможности их редактировать (эту фичу можно было только включить или выключить). Но вот на днях у пользователей Blogspot такая возможность стала доступной! 
Для того чтобы начать идем в админку → «Шаблон» → «Для мобильных устройств». Вызываем окно настройки (для этого кликаем на кнопку с шестеренкой (Gear)):
Обратите внимание, что теперь появилась возможность выбрать один из шести мобильных шаблонов (ранее был один — Simple). Кроме этого в списке появилась опция «дополнительно», выбрав которую вы можете настроить вид мобильного шаблона самостоятельно. Как это сделать? Вот вам несколько отправных точек.
Внешний вид мобильного шаблона
Теперь вы можете полностью настроить внешний вид мобильного шаблона на свое усмотрение. Body элемент мобильного темплейта начинается с кода:
<body class='loading mobile'>
Для того чтобы посмотреть элементы относящиеся к мобильному шаблону и изменить структуру, ищите:

<body expr:class='&quot;loading&quot; + 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" в виде логотипа, пользователь мобильного устройства видит лишь ссылку.

Удачных вам экспериментов и не забывайте делать бекап!

P.S. Хотите прокачать свой айфон до нового уровня крутости? можно купить бампер на iPhone 4 специальное такое приспособление которое защитит ваш смартфон и добавит уникальности.
Если сломался автомобиль не спешите сильно расстраиваться возможно ремонт стартеров или автомобильных генераторов решит вашу проблемы быстро и без особых затрат.
В интернете есть все - музыка, видео фильмы, посетите книжный интернет магазин если хотите прикупить для себя нового чтива, это быстро, удобно и с доставкой.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails