Blue-sky (HTML5) тема для Litepublisher

2011-05-13 | Бесплатные темы

html5 theme

Blue-sky: Скачать бесплатно

Важно: Эта версия темы немного устарела и не поддерживает Lite Publisher начиная с версии 4.93-*. Для версий 5* предназначена обновленная версия Blue-Sky темы.

[toptext]

Наконец закончил разработку новой темы для Lite publisher CMS. Верстка отняла намного больше времени, чем я планировал. Поскольку кроссбраузерного отображения я добивался не использованием хаков, а переписыванием и приведением кода в оптимальный вид для корректного отображения во всех браузерах.

Описание темы

Blue-sky - светло голубая, сверстанная на HTML5 с некоторыми эффектами CSS3, оптимизированная под поисковые системы тема.
Сверстана без использования CSS хаков для достижения кроссбраузерности. Отказался даже от использования скриптов .htc для того чтобы научить IE CSS3.
Поскольку HTML5 только начинает вводиться в обиход и полностью пока еще не поддерживается большинством браузеров, свел количество новаторских тегов к минимуму.
Исправлены даже некоторые недостатки и не корректное отображение в IE 6-7, присутствующие у дефолтной темы.
С помощью стилей реализовано красивое отображение облака меток-тегов.
Код счетчиков в футер и баннера 368х60 в хеадер добавляется из админки.

Валидность:

Кроссбраузерность(на чем тестировал лично):

В остальных браузерах думаю тоже проблем быть не должно. В случае, если заметите в каком-либо браузере не корректное отображение, прошу писать в комментариях.

SEO оптимизация

  1. Минимальное количество кода, стилей, фоновых картинок для ускорения загрузки страниц.
  2. СЕО дружественный порядок загрузки элементов страницы:
    1. Контент
    2. Правый сайдбар
    3. Футербар
    4. Хеадер
    5. Футер

Установка темы:

Файлы темы находятся в архиве, который можно загружать прямо на ваш сервер загрузчиком тем и плагинов движка.
Для корректного отображения, заменить весь код в секции HEAD админки(кроме скриптов экстра установленных вами плагинов), на:

<meta name="generator" content="Lite Publisher $site.version" /> <!-- leave this for stats -->
<link rel="stylesheet" href="$template.url/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="$site.url/js/prettyphoto/css/prettyPhoto.css" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="$site.name RSS Feed" href="$site.url/rss.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="$site.url/rsd.xml" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="$site.url/wlwmanifest.xml" />
<link rel="shortcut icon" href="$template.icon" type="image/x-icon" />
<link rel="pingback" href="$site.url/rpc.xml" />
<link rel="sitemap" href="$site.url/sitemap.htm" />
<!--[if lt IE 9]><script>var e=("article,aside,footer,header,nav,section").split(',');for (var i=0;i<e.length;i++){document.createElement(e[i]);}</script><![endif]-->
<!--[if lte IE 6]><script type="text/javascript" src="$template.url/js/DD_belatedPNG.js"></script><script type="text/javascript">DD_belatedPNG.fix('#top .left a,#connect img,.post-tags,post-rss,.post-rsscomments');</script><![endif]-->
<script type="text/javascript" src="$site.files/js/litepublisher/litepublisher.$site.jquery_version.min.js"></script>
<script type="text/javascript">$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto();});</script>

Или другой вариант: заменить содержание скрипта DD_belatedPNG.js в условных комментариях на приведенное выше, и добавить код:

<!--[if lt IE 9]><script>var e=("article,aside,footer,header,nav,section").split(',');for (var i=0;i<e.length;i++){document.createElement(e[i]);}</script><![endif]-->

Если у вас появятся вопросы по теме или помошь в подгонке, изменении ширины сайдбара, высоты хеадера и т.п., спрашивайте в комментариях к посту, обязательно отвечу и помогу.

Статьи по теме:

Комментарии к записи

RSS

Рекомендую
  1. WEBHOST1 - проверенный недорогой хостинг для сайта с PHP и MYSQL.
  2. LOGASTER - генератор логотипов и фавиконок с поддержкой кириллицы.
  3. QComment - наполнение сайтов комментариями и заработок на отзывах.
Категории

Как создать:

Где найти:

Как заработать:

© 2011-2016 «Сеодиз». Создание сайтов и заработок для начинающих.
Копирование запрещено.