Blogger4You: Merry Christmas and Happy New Year!

И вот уже 24 декабря канун католического Рождества и я после рождественского ужина, который приготовил Кайл, вдруг отчетливо осознаю, что откладывать написание этого поста уже нельзя. Что время прямо-таки несется навстречу и нашим праздника: Новому Году, Православному Рождеству и Старому Новому Году!

Поэтому сегодня я вам очень коротко расскажу как установить этот скрипт, который показывает случайным образом электронные открытки-поздравления с Новым Годом и Рождеством.

Открытки совершенно легально взяты мной с сайта http://www.123greetings.com/, где они дают код для вставки электронной открытки на сайт или в блог. Правда, код для вставки пришлось немного поменять, т.к. код, который давали они не маштабировался, а мне хотелось иметь возможность как добавлять в блог открытки оригинального размера 550х400 так и уменьшенные копии для боковой колонки. Так я подобрала на этом сайте чуть больше 30 открыток по Новогодне-Рождественской тематике и написала простенький скриптик, который показывает открытки почти случайным образом.

<center><span style="color:blue; font-family:Monotype Corsiva; font-size:40px;">С Наступающим Новым годом!</span></center>

<script type="text/javascript">
NYheight=400;
NYwidth=550;
</script>
<script src="http://blogger4you.narod.ru/JavaScript/HappyNewYear.js" type="text/javascript"></script>
<span style="color:blue; font-family:Monotype Corsiva; font-size:20px;">Здесь каждый раз новая открытка! Заглядывайте иногда... ;)</span>

На вкладке Дизайн кликаем по Добавить гаджет, выбираем тип гаджета Html/JavaScript и вставляем туда код. Гаджет можно оставить в боковой колонке, а можно и переместить над статьями.

В коде можно исправить:
1) Прежде всего высоту и ширину показываемой открытки NYheight=400; NYwidth=550;
т.е. вот эти числа 400 и 550

2) Надписи над и под открыткой

Их можно убрать совсем код я выделила светло-зеленым, а можно поменять только слова, а можно поменять также цвет (color), размер шрифта (font-size) и стиль шрифта (font-family).

С Наступающим Новым годом!
Здесь каждый раз новая открытка! Заглядывайте иногда... ;)

Спасибо, всем читательницам, которым понравился прошлогодний скрипт со снежинками, и которые вдохновили меня создать еще что-нибудь новогоднее!

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

Merry Christmas and Happy New Year!



Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

Blogger: Шрифты из шаблона выносим на вкладку Шрифты и цвета!

Здравствуйте!

Сегодня мы с вами поговорим о шрифтах нашего блога, вернее об управлении ими на вкладке Шрифты и цвета. Управлять-то ими легко и статью на эту тему я уже писала Blogger: Изменяем размер шрифта и это все работает для стандартных (рекомендованных Blogger'ом) шаблонов. Проблемы начинаются когда блоггеры устанавливают себе скаченные из интернета шаблоны для Blogger'а . Многие из них красивы, но не поддерживают всех возможностей платформы Blogger. В прошлой статье я рассказала и опубликовала маленькое видео как "вынести" управление цветом вашего шаблона на вкладку "Шрифты и цвета" раздела Дизайн на Панели инструментов (Blogger: Цвета из шаблона выносим на вкладку Цвета и шрифты). Сегодня мы продолжим улучшать управление шаблоном и сделаем на вкладке "Шрифты и цвета" возможность управления и шрифтами шаблона.

Еще раз повторюсь, что статья является продолжением предыдущей статьи Blogger: Цвета из шаблона выносим на вкладку Цвета и шрифты, поэтому всем рекомендуется сначала заглянуть туда. А мы продолжаем...

1) Как и в прошлый раз мы делаем заготовку в Блокноте:

<Variable name="f0" description="Шрифт 0"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f1" description="Шрифт 1"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f2" description="Шрифт 2"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f3" description="Шрифт 3"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f4" description="Шрифт 4"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f5" description="Шрифт 5"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f6" description="Шрифт 6"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f7" description="Шрифт 7"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f8" description="Шрифт 8"
type="font" default="normal normal 100% Georgia, Serif">
<Variable name="f9" description="Шрифт 9"
type="font" default="normal normal 100% Georgia, Serif">

Про имя переменной (variable), мы с вами уже знаем, про описание переменной (description) тоже, тип переменной (type) теперь font, что и понятно, потому что описываем мы с вами переменные для шрифтов.

А вот про значение по умолчанию (default) т.к. оно стало намного сложнее придется поговорить подробно.

Все дело в том что описатель шрифта font это описатель набора свойств шрифта.

Свойства в списке располагаются в следующей последовательности: font-style font-weight font-size font-family

Для параметра font-style в значении по умолчанию Blogger допускает только 2 значения: normal (нормальный шрифт)или italic (курсив)

Для параметра font-weight в значении по умолчанию Blogger допускает только 2 значения: normal (нормальный шрифт)или bold (полужирный)

Задавать параметр font-size в значении по умолчанию можно только в процентах.

А font-family может быть только выбрана из значений Arial, Courier, Georgia, Times, Trebuchet, Verdana.

Идея "вынесения" шрифтов на вкладку Шрифты и цвета осталась таже. Не ставя галочку на Расширить шаблоны виджета ищем слово font в Html-коде нашего шаблона.

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

font: 1em/1.5em Verdana, Geneva, Arial, Helvetica, sans-serif;
font:bold 100% verdana, arial, helvetica, sans-serif;
font:3em Georgia,Times New Roman,Trebuchet;

Ну, что тут можно сказать все описатели между двоеточием и точкой с запятой мы заменим на имя очередной переменной со знаком доллара впереди $f1 например.

А в блокноте в описании значения по-умолчанию этой переменной можно поставить:
1) на первой позиции normal (если мы не встретили italic)
2) на второй позиции normal (если в коде не упоминалось bold)
3) на третьей позиции 100% (если вы не видите в описании другие цифры со знаком процент, все эти 3em, 1em/1,5 em тоже размеры, но Blogger во вкладке "Шрифты и цвета" их не поддерживает, единственное, что можно сказать, что если 1.5em - это 100%, то 3em будет 200%).
4) на четвертой позиции мы поставим семейство шрифтов его можно целиком вставить в дефолтное значений.

Итак в Html-коде у нас будет:

font: $f0;
font: $f1;
font: $f2;


А в Блокноте если мы поменяем значения по умолчанию:

<Variable name="f0" description="Шрифт 0"
type="font" default="normal normal 120% Verdana, Geneva, Arial, Helvetica, sans-serif">
<Variable name="f1" description="Шрифт 1"
type="font" default="normal bold 100% verdana, arial, helvetica, sans-serif">
<Variable name="f2" description="Шрифт 2"
type="font" default="normal normal 300% Georgia,Times New Roman,Trebuchet">

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

Это может быть что-то одно или сразу несколько описателей font-size font-weight font-style или font-family. Бывают и другие описатели, например font-variant (их мы на имя переменной не заменяем, а оставляем как есть). А уже известные нам описатели, изменение которых на вкладке Шрифты и цвета Blogger поддерживает мы заменим на font: и имя ОДНОЙ переменной;

В одном месте Html-кода шаблона над которым я работала встретилось такое описание некоторого блока:

{
text-align:justify;
font-size:14px;
font-weight:bold;
}

я его заменила на

{
text-align:justify;
font:$f4;
}

А в Блокноте изменила значения по умолчанию только в известных позициях:
<Variable name="f4" description="Шрифт 4"
type="font" default="normal bold 120% Georgia, Serif">

Возможно, со значениями по умолчанию у переменных можно особенно и не возиться, а когда все описатели шрифтов в блоге будут заменены на переменные, и в Html-код блога вы вставите описания переменных для шрифтов. Описания переменных вставляем ПЕРЕД строчкой

Конец определения переменных ------- */

И вот когда все изменения сделаны идем на вкладку Шрифты и цвета и изменяем размеры, стиль написания, жирность и курсив, так как нам захочется. Ведь если встал вопрос о вынесении настрек для шрифтов на вкладку Дизайна "Шрифты и цвета", значит что-то в шаблоне нас не совсем устраивало.

Прошу прощения за скучное описание, но может быть кому-нибудь пригодится.

Всем здоровья и удачи!
Не мерзнете!

Света

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

Blogger: Цвета из шаблона выносим на вкладку Шрифты и цвета!

Здравствуйте!

Как вы поняли из картинки сегодня мы будем строить Цветное Счастье своими руками!

Все началось с маленького поста про Цвета и шрифты в шаблоне Blogger: Изменяем размер шрифта где я хотела рассказать для новичков как работать с вкладкой Шрифты и цвета в разделе Дизайн на Панели инструментов, после которого я получила множество писем с просьбой помочь изменить шаблон, чтобы изменение цветов стало доступно с вкладки Цвета и шрифты.

Да я знаю, что у многих шаблонов, найденных на просторах интернета изменить Цвета и Шрифты на этой вкладке невозможно или они даже просто отсутствуют. Я вообще-то не очень высокого мнения об этих шаблонах обычно красивого дизайна, но очень слабого технического исполнения. (Лично нам с Кайлом пришлось дорабатывать несколько десятков самых разнообразны шаблонов.)

И сегодня я вам расскажу как выводить цвета шаблона нашего блога на вкладку Шрифты и цвета в разделе Дизайн для последующей возможности их удобной корректировки.

Это совсем не сложно, даже если вы ничего не знаете об Html/Xml и CSS, это все равно очень просто сделать. Единственное, что от вас потребуется это определенное усердие. Давайте я сначала расскажу вам как это сделать, а потом наиболее робкие смогут посмотреть 10-минутный ролик где я произвожу все описанные мной процедуры "в прямом эфире".

Открываем Блокнот (или любой другой текстовый редактор) и копируем туда этот код:

/* Определяем переменные для цветов и шрифтов
<Variable name="a0" description="Цвет 0"
type="color" default="#FFFFFF">
<Variable name="a1" description="Цвет 1"
type="color" default="#FFFFFF">
<Variable name="a2" description="Цвет 2"
type="color" default="#FFFFFF">
<Variable name="a3" description="Цвет 3"
type="color" default="#FFFFFF">
<Variable name="a4" description="Цвет 4"
type="color" default="#FFFFFF">
<Variable name="a5" description="Цвет 5"
type="color" default="#FFFFFF">
<Variable name="a6" description="Цвет 6"
type="color" default="#FFFFFF">
<Variable name="a7" description="Цвет 7"
type="color" default="#FFFFFF">
<Variable name="a8" description="Цвет 8"
type="color" default="#FFFFFF">
<Variable name="a9" description="Цвет 9"
type="color" default="#FFFFFF">
<Variable name="a10" description="Цвет 10"
type="color" default="#FFFFFF">
<Variable name="a11" description="Цвет 11"
type="color" default="#FFFFFF">
<Variable name="a12" description="Цвет 12"
type="color" default="#FFFFFF">
<Variable name="a13" description="Цвет 13"
type="color" default="#FFFFFF">
<Variable name="a14" description="Цвет 14"
type="color" default="#FFFFFF">
<Variable name="a15" description="Цвет 15"
type="color" default="#FFFFFF">
<Variable name="a16" description="Цвет 16"
type="color" default="#FFFFFF">
<Variable name="a17" description="Цвет 17"
type="color" default="#FFFFFF">
<Variable name="a18" description="Цвет 18"
type="color" default="#FFFFFF">
<Variable name="a19" description="Цвет 19"
type="color" default="#FFFFFF">

<Variable name="a20" description="Фон 20"
type="color" default="#FFFFFF">
<Variable name="a21" description="Фон 21"
type="color" default="#FFFFFF">
<Variable name="a22" description="Фон 22"
type="color" default="#FFFFFF">
<Variable name="a23" description="Фон 23"
type="color" default="#FFFFFF">
<Variable name="a24" description="Фон 24"
type="color" default="#FFFFFF">
<Variable name="a25" description="Фон 25"
type="color" default="#FFFFFF">
<Variable name="a26" description="Фон 26"
type="color" default="#FFFFFF">
<Variable name="a27" description="Фон 27"
type="color" default="#FFFFFF">
<Variable name="a28" description="Фон 28"
type="color" default="#FFFFFF">
<Variable name="a29" description="Фон 29"
type="color" default="#FFFFFF">

Конец определения переменных ------- */

Ничего сложного в этом коде нет, здесь я описала 20 переменных для цветов шрифта и 10 переменных для цвета фона.

Описатель переменной берется в угловые скобочки, т.е. значки меньше и больше < > а внутри определяется имя переменной (Variable name). Имена переменных должны быть уникальны и я за отсутствием богатой фантазии дала им имена от a0 до a29, далее идет описание переменной (description) это та текстовая строка, которую вы видете напротив цвета на вкладке Цвета и шрифты. Далее идет тип переменной (type) в настоящий момент Blogger допускает только два типа переменных color (что значит цвет) и font (что значит шрифт). Сегодня мы с вами работаем только с цветами. И наконец, так сказать цвет по умолчанию (default) я пока поставила белый #FFFFFF.

Теперь открываем на Панели инструментов в разделе Дизайн вкладку Изменить Html. Галочку расширить шаблоны виджета НЕ СТАВИМ.

0) Делаем резервную копию нашего шаблона: Сохраняем и восстанавливаем шаблон на Blogger(е)!

1) Если в вашем шаблоне уже есть описатели цветов, но они не работают: Ищем (CtrlF) строчки начинающиеся с <Variable и удаляем их чтобы не мешали нашей работе.

2) Ищем описатели цвета color в нашем шаблоне.

Это будет выглядеть примерно так:
color: #cccccc;
или значение цвета может быть записано в сокращенном трехсимвольном виде:
color: #ccc;

меняем значение цвета вместе с символом # на имя очередной переменной, а вот перед именем переменной надо будет поставить знак $

т.е. вместо color: #cccccc; мы получим color: $a0; а чтобы не потерять значение цвета, мы в описании переменной a0 (в Блокноте) поставим #cccccc как значение цвета по умолчанию.

Итак, в шаблоне вместо строчки color: #cccccc;
У нас будет строчка color: $a0;

А в Блокноте вместо такого описания переменной a0
<Variable name="a0" description="Цвет 0"
type="color" default="#FFFFFF">
У нас будет такое описание
<Variable name="a0" description="Цвет 0"
type="color" default="#cccccc">

Так и будем продолжать, только не забывайте последовательно менять имена переменных $a1, $a2, $a3 и т.д.

3) Далее проделываем ту же процедуру с описателем фона background, т.е. ищем в нашем шаблоне вхождение описателя background и точно так же меняем числовое значение цвета на имя очередной переменной желательно с описателем "Фон nn" (чисто из эстетических соображения чтобы отделить переменные описывающие цвет шрифта, от переменных описывающих шрифт фона, хотя это не так уж важно).

4) Из блокнота удаляем лишние (не использованные нами) описатели переменных.

5) Теперь в Html-коде нашего шаблона ищем такую строчку
<b:skin><![CDATA[

И сразу после неё вставляем из Блокнота получившийся у нас код с описаниями переменных. Нажимаем ПРОСМОТР и если ничего плохого не случилось нажимаем СОХРАНИТЬ.

6) Идем на вкладку Шрифты и цвета в разделе Дизайн и пытаемся понять какой цвет чему в нашем шаблоне соответствует. Меняем описания переменных в нашем Блокноте с Цвет 1, Цвет 2,... на осмысленные.

7) Заменяем описатели переменных цветов в нашем шаблоне, на новые с осмысленными описаниями из блокнота или просто правим описания (description) переменных. Опять же ПРОСМОТР и СОХРАНИТЬ.

А теперь видео - немного нудное... но что сделать это вот такая нудная работа вытаскивать цвета на вкладку Шрифты и цвета, зато потом становится очень удобно.

Смотрим видео, а я с вами прощаюсь!


Всем хороших выходных!
Света

ПРОДОЛЖЕНИЕ: Blogger: Шрифты из шаблона выносим на вкладку Шрифты и цвета!

PS Источник: http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=46871

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...