Специфика установки скриптов и стилей в Blogger

Предполагаю, что для рядового пользователя блога на платформе Blogger вполне может быть не до конца ясна ситуация со скриптами и файлами css: зачем они нужны, как работают, и что из себя представляют. Это нормально, ведь не каждый, кто завёл блог, является матёрым веб дизайнером.

Для начала проясним ситуацию, с какими скриптами работает Blogger. Точнее, с чем он не работает. Blogger ничего общего не имеет с php и даже не надо пытаться подбирать скрипты с юкоза. Однако есть некоторые лазейки, позволяющие запускать несложные php коды с внешнего хостинга. Примеры тому - счётчик посетителей и счётчик количества просмотров поста, которые не смогут работать без исполняемого кода.

Внешний хостинг. Изначально блоггер был построен так, что пользователь не имел доступа к движку сайта и к папкам на сервере (точнее на серверах). В Blogger нельзя ничего закачать, и ftp доступа тоже никуда нет. Кому интернесно почему - копайте специфику "gse" и джава контейнеров.
Поэтому хранение всех файлов, включая фотографий, которые хостятся на пикассе и попадают туда через интерфейс блоггера, производится строго на внешнем хостинге. Это может быть платный или бесплатный сервис, либо сайты гугла, либо какой-нибудь github и т.п.

Есть в блоггере жирный-жирный плюс: он допускает применение jQuery и Ajax (асинхронный джаваскрипт + XML) технологий, т.е. буквально любых джаваскриптов (javascript или js). Такая возможность породила целый сонм рецептов по "прокачке блога".

Блог мысленно можно представить в виде вселенной, со своими законами и особенностями. Центральное место в Blogger занимает шаблон(template), который отвечает за отображение и функционирование всех элементов блога (только динамические шаблоны пользовател невправе контроллировать). Шаблон прекрасно понимает язык стилей css и имеет специальную секцию для этого. Все стили хранятся по стандарту в области "головы" шаблона и сайта - в head.

Есть в Blogger один закон, который следует учитывать. Стили и скрипты, помещённые в head, будут действовать на все страницы блога. Если их поместить непосредственно на внутренней странице (например, при написании поста), они будут актуальны только для этой страницы.

Скрипты и стили, особенно в сложном и длинном исполнении, помещаются в файл на внешний, отдельный хостинг, и записываются специальными ссылками в секцию шаблона, head. После чего они успешно действуют на весь блог. Аналогичный эффект произойдёт, если вы их поместите в любой html виджет из админ-интерфейса.

Html код, из которого так же, помимо стилей со скриптами, может состоять виджет, ставится непосредственно в нужное место в шаблоне, в секцию body, либо в html виджет, (если того требует ситуция) либо в тело, готовящейся к публикации, статьи.

Как устанавливать скрипты?

Предположим, нам нужно установить код подсказок к себе в блог. Мы скачали и видим, что есть файл css, файл javascript и html код в виде обычной странички.
Все исходники страницы доступны при выборе функции в браузере (контекстное меню через правую кнопку мыши) "посмотреть исходный код страницы" или "исходный код выделенного элемента".

Рассмотрим установку подсказки в Blogger на примере BeautyTips.

Структура архива:

В папке DEMO сразу же можно посмотреть демонстрацию возможностей подсказок и прочитать описание. В папке other_libs находятся дополнительные библиотеки или расширения, подключать их нужно строго по рекомендации в инструкциях (например, здесь расширение используется, чтобы устранить проблему с z-index в ie6).  Файлы jquery.bt.min.js (jquery.bt.js несжатая версия) и jquery.bt.css являются скриптом подсказки и стилями для неё. Да, в блоге обязательно должна функционировать библиотека jQuery. Без неё этот пример работать не будет!

Теперь наведите мышь↓
Blogger не для чайников!!!



Теперь кладём стили на хостинг и прописываем в шаблон перед тегом </head>:

<script src="http://хостинг/jquery.bt.min.js" type="text/javascript" charset="utf-8"></script>
<link href="http://хостинг/jquery.bt.css" rel="stylesheet" type="text/css">

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

Последний шаг у нас: осталось подключить сами подсказки. Настроечный скрипт (для удобства он выполняется отдельно) и html код для вставки такой подсказки (в тело статьи) описаны в разных вариациях на демо страничке из архива:

Я выбрал вариант с Content from attribute. Код html помещается в статью, скрипт помещается между тегами <script></script> и тоже отправляется в </head>.
С этого момента, присваивая ссылке id="example3", вы будете получать именно эту подсказку. Для другой подсказки используйте другой id.

Как вот ↓

ЗДЕСя

И здесь очень тонкий момент. Я поступаю так:

в целях уменьшения нагрузки на блог (а скрипты ой как перегружают движок браузера посетителя и тормозят загрузку блога), я помещаю в head те элементы, которые мне нужны всё время, а те, которые пригодятся один-два раза, помещаю непосредственно на страницу.

Как устанавливать стили?

Напомню, что к подсказкам давался файл jquery.bt.css. Мы его положили в шаблон (см. выше), но бывают такие случаи, когда приходится устанавливать стили в html виджет блоггера или прямо в статью.
Для этого открываем файл, копипастим его содержимое между тегами <style></style> и ставим в любую часть блога.

Иначе стили прописываются в шаблон. Имеется ввиду, не в отдельном файле, как только что я писал, а всем текстом в часть шаблона, которая отвечает за css.
Обычно секция css в шаблоне Blogger заканчивается строкой ]]></b:skin> и "узнать" её нетрудно.
Она имеет подобный вид:

.content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: $(content.width);
        max-width: $(content.width);
        _width: $(content.width);
      }

      .main-inner .columns {
        padding-left: $(main.column.left.width);
        padding-right: $(main.column.right.width);
      }

      .main-inner .fauxcolumn-center-outer {
        left: $(main.column.left.width);
        right: $(main.column.right.width);
        /* IE6 does not respect left and right together */
        _width: expression(this.parentNode.offsetWidth -
            parseInt("$(main.column.left.width)") -
            parseInt("$(main.column.right.width)") + 'px');
      }

Состоит из блоков, каждый из которых обязательно заключён в фигурные скобки. Так вот между этих блоков как раз и нужно ставить содержимое файла jquery.bt.css. В данном случае этого делать не надо, поскольку стили у нас прекрасно сидят в отдельном файле (хотя для этих подсказок они не особо нужны).

Минус такого метода заключается в том, что шаблон перегружается кодом и будет медленней загружаться со временем. Плюс - всё под рукой, и если отвалится хостинг, блог не парализует таймаут ожидания. Конечно, при условии, что скрипт также "привязан" к шаблону.

Если вас заинтересовали подсказки, можете попробовать Simpletip.

Порядок загрузки блога на Blogger

Предположим, грузится главная страница.

<head>

↓

<body> + всё, что до "ката" (<!--more-->)

↓

виджеты/гаджеты (некоторые виджеты грузятся раньше)
↓
"тяжёлые" виджеты, типа friendconnect или feed

Конечно, многое относительно. Следует понимать. что гугл постоянно тестирует свои разработки на Blogger. Как, например, его попытки распараллелить загрузку скриптов иногда приводят к ошибке 503.
В заключение статьи советую не заигрываться с плагинами и отдавать отчёт в своих действиях. Не всегда красота стоит 5 минутного ожидания посетителя.

И по традиции какая нибудь фигня для снятия напряжения...

Поцеловал Иван-Царевич лягушку, и превратилась она в доброго молодца...