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

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

Blogger: Архив в виде календаря!

Здравствуйте, мы вернулись!

Вернулись мы от Челиты и Миши как и обещали 18 ноября (Какое же это было восхитителное путешествие! Спасибо Челиточка!!!) 19 уже на работу, а там... аврал одним словом, 20 ноября не смотря ни на что я начала отвечать на комментарии (все еще отвечаю). А теперь вот и до поста дело дошло... Долго думала о чем бы таком написать, но многие темы пока отложила, т.к. там надо много подробно рассказывать, а ведь сегодня воскресенье и опять я работала -- аврал все-таки, когда я говорю аврал - я не шучу, значит это он и есть.

Кстати, вот только что выяснила в википедии точное значение слова аврал: "Аврал (искажённое англ. over all «все наверх») — спешная (по специальному заданию или по тревоге) работа на судне всей командой. Со временем этот морской термин стал использоваться повсеместно, и теперь означает просто выполняемую всем коллективом спешную работу."

Про что это, кстати, я? Да, вы лучше посмотрите на календарь! О чем это вам говорит?

Неискушенный читатель отметит, что Новый год скоро... Кстати, желающие могут себе в блог напустить снежинок (не забывайте, что снежинки будут тормозить работу вашего блога, но красота и новогоднее настроение возможно этого стоят). А вот искушенные читатели уже знают, что сегодня я раскажу как поставить календарь (ну, может быть не совсем такой как в этом посте, но такой как у меня в боковой колонке) к себе в блог. А расскажу я об этом потому что Кайл lдля блога Windows to Russia нашел великолепный скрипт календаря и ему в нем абсолютно все нравилось, а мне в нем не понравилось, что календарь у Кайла показывал посты только с августа по ноябрь 2009 (слишком у Кайла много постов в месяц!).

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

Первоисточник лежит здесь: Blogger Archive Calendar, но для Кайла мне пришлось сделать некоторые доработки, а для русскоязычных блоггеров я этот календарь даже локализовала (т.е. перевела на русский язык).

Итак, ничего страшного нет все будем делать по шагам:

1. Помним, что этот календарь является лишь оболочкой для Blogger'овского архива, поэтом убедимся для начала, что этот элемент дизайна Архив у нас на боковой колонке присутствует. А теперь чтобы наш javascript (который мы на следующем шаге добавим в Html-код шаблона) работал, надо изменить вид элемента Архив. Вы можете это сделать из Панели инструментов кликнув на Дизайн или кликнув в вашем блоге на картинку под вашим Архивом.

И вот к какому виду вам надо привести ваш Архив:
Нажимаем Сохранить.

2. Теперь редактируем Html-код шаблона:

1) Идем Панель управления -- Дизайн -- Изменить Html

2) Галочку на Расширить шаблоны виджета НЕ СТАВИМ

3) В html-коде ищем строчку слово:

BlogArchive1

4) И ВМЕСТО строчки содержащей это заветное слово BlogArchive1 вставляем следующий код:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='toggle' var='interval'>
<!-- Toggle not needed for Calendar -->
</b:includable>
<b:includable id='flat' var='data'>
<div id='bloggerCalendarList'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</div>

<div id='blogger_calendar' style='display:none'>
<table id='bcalendar'><caption id='bcaption'>

</caption>
<!-- Table Header -->
<thead id='bcHead'></thead>
<!-- Table Footer -->

<!-- Table Body -->
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr>
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr>
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr>
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr>
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr>
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr>
</tbody>
</table>
<table id='bcNavigation'><tr>
<td id='bcFootPrev'></td>
<td id='bcFootAll'></td>
<td id='bcFootNext'></td>
</tr></table>

<div id='calLoadingStatus' style='display:none; text-align:center;'>
<script type='text/javascript'>bcLoadStatus();</script>
</div>
<div id='calendarDisplay'/>

</div>

<script type='text/javascript'> initCal();</script>

</b:includable>
<b:includable id='posts' var='posts'>
<!-- posts not needed for Calendar -->
</b:includable>
<b:includable id='menu' var='data'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
<b:includable id='interval' var='intervalData'>
Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format
</b:includable>
</b:widget>

4) Нажимаем СОХРАНИТЬ.

3. Продолжаем редактировать Html код шаблона:

по-прежнему НЕ СТАВИМ галочку на Расширить шаблоны виджета

ищем строчку </head>

и ПЕРЕД НЕЙ вставляем следующий код:

<!-- Blogger Archive Calendar -->
<script type='text/javascript'>
//<![CDATA[

var bcLoadingImage = "http://phydeauxredux.googlepages.com/loading-trans.gif";
var bcLoadingMessage = " Минуточку....";
var bcArchiveNavText = "Все посты этого месяца";
var bcArchiveNavPrev = '&#9668;';
var bcArchiveNavNext = '&#9658;';
var headDays = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
var headInitial = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];

// Nothing to configure past this point ----------------------------------
var timeOffset;
var bcBlogID;
var calMonth;
var calDay = 1;
var calYear;
var startIndex;
var callmth;
var bcNav = new Array ();
var bcList = new Array ();

//Initialize Fill Array
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"];
function openStatus(){
document.getElementById('calLoadingStatus').style.display = 'block';
document.getElementById('calendarDisplay').innerHTML = '';
}
function closeStatus(){
document.getElementById('calLoadingStatus').style.display = 'none';
}
function bcLoadStatus(){
cls = document.getElementById('calLoadingStatus');
img = document.createElement('img');
img.src = bcLoadingImage;
img.style.verticalAlign = 'middle';
cls.appendChild(img);
txt = document.createTextNode(bcLoadingMessage);
cls.appendChild(txt);
}
function callArchive(mth,yr,nav){
// Check for Leap Years
if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
calMonth = mth;
calYear = yr;
if(mth.charAt(0) == 0){
calMonth = mth.substring(1);
}
callmth = mth;
bcNavAll = document.getElementById('bcFootAll');
bcNavPrev = document.getElementById('bcFootPrev');
bcNavNext = document.getElementById('bcFootNext');
bcSelect = document.getElementById('bcSelection');
a = document.createElement('a');
at = document.createTextNode(bcArchiveNavText);
a.href = bcNav[nav];
a.appendChild(at);
bcNavAll.innerHTML = '';
bcNavAll.appendChild(a);
bcNavPrev.innerHTML = '';
bcNavNext.innerHTML = '';
if(nav < bcNav.length -1){
a = document.createElement('a');
a.innerHTML = bcArchiveNavPrev;
bcp = parseInt(nav,10) + 1;
a.href = bcNav[bcp];
a.title = 'Previous Archive';
prevSplit = bcList[bcp].split(',');
a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;};
bcNavPrev.appendChild(a);
}
if(nav > 0){
a = document.createElement('a');
a.innerHTML = bcArchiveNavNext;
bcn = parseInt(nav,10) - 1;
a.href = bcNav[bcn];
a.title = 'Next Archive';
nextSplit = bcList[bcn].split(',');
a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;};
bcNavNext.appendChild(a);
}
script = document.createElement('script');
script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive';
document.getElementsByTagName('head')[0].appendChild(script);
}

function cReadArchive(root){
// Check for Leap Years
if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) {
fill[2] = '29';
}
else {
fill[2] = '28';
}
closeStatus();
document.getElementById('lastRow').style.display = 'none';
calDis = document.getElementById('calendarDisplay');
var feed = root.feed;
var total = feed.openSearch$totalResults.$t;
var entries = feed.entry || [];
var fillDate = new Array();
var fillTitles = new Array();
fillTitles.length = 32;
var ul = document.createElement('ul');
ul.id = 'calendarUl';
for (var i = 0; i < feed.entry.length; ++i) {
var entry = feed.entry[i];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
var link = entry.link[j].href;
}
}
var title = entry.title.$t;
var author = entry.author[0].name.$t;
var date = entry.published.$t;
var summary = entry.summary.$t;
isPublished = date.split('T')[0].split('-')[2];
if(isPublished.charAt(0) == '0'){
isPublished = isPublished.substring(1);
}
fillDate.push(isPublished);
if (fillTitles[isPublished]){
fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title;
}
else {
fillTitles[isPublished] = title;
}
li = document.createElement('li');
li.style.listType = 'none';
li.innerHTML = '<a href="'+link+'">'+title+'</a>';
ul.appendChild(li);

}
calDis.appendChild(ul);
var val1 = parseInt(calDay, 10)
var valxx = parseInt(calMonth, 10);
var val2 = valxx - 1;
var val3 = parseInt(calYear, 10);
var firstCalDay = new Date(val3,val2,1);
var val0 = firstCalDay.getDay();
startIndex = val0 + 1;
var dayCount = 1;
for (x =1; x < 38; x++){
var cell = document.getElementById('cell'+x);
if( x < startIndex){
cell.innerHTML = ' ';
cell.className = 'firstCell';
}
if( x >= startIndex){
cell.innerHTML = dayCount;
cell.className = 'filledCell';
for(p = 0; p < fillDate.length; p++){
if(dayCount == fillDate[p]){
if(fillDate[p].length == 1){
fillURL = '0'+fillDate[p];
}
else {
fillURL = fillDate[p];
}
cell.className = 'highlightCell';
cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>';
}
}
if( dayCount > fill[valxx]){
cell.innerHTML = ' ';
cell.className = 'emptyCell';
}
dayCount++;
}
}
visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1;
if(visTotal >35){
document.getElementById('lastRow').style.display = '';
}
}

function initCal(){
document.getElementById('blogger_calendar').style.display = 'block';
var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
document.getElementById('bloggerCalendarList').style.display = 'none';
calHead = document.getElementById('bcHead');
tr = document.createElement('tr');
for(t = 0; t < 7; t++){
th = document.createElement('th');
th.abbr = headDays[t];
scope = 'col';
th.title = headDays[t];
th.innerHTML = headInitial[t];
tr.appendChild(th);
}
calHead.appendChild(tr);
for (x = 0; x <bcInit.length;x++){
var stripYear= bcInit[x].href.split('_')[0].split('/')[3];
var stripMonth = bcInit[x].href.split('_')[1];
bcList.push(stripMonth + ','+ stripYear + ',' + x);
bcNav.push(bcInit[x].href);
}
var sel = document.createElement('select');
sel.id = 'bcSelection';
sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
q = 0;
for (r = 0; r <bcList.length; r++){
var selText = bcInit[r].innerHTML;
var selCount = bcCount[r].innerHTML.split('> (')[1];
var selValue = bcList[r];
sel.options[q] = new Option(selText + ' ('+selCount,selValue);
q++
}
document.getElementById('bcaption').appendChild(sel);
var m = bcList[0].split(',')[0];
var y = bcList[0].split(',')[1];
callArchive(m,y,'0');
}

function timezoneSet(root){
var feed = root.feed;
var updated = feed.updated.$t;
var id = feed.id.$t;
bcBlogId = id.split('blog-')[1];
upLength = updated.length;
if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";}
else {timeOffset = updated.substring(upLength-6,upLength);}
timeOffset = encodeURIComponent(timeOffset);
}

//]]>
</script>
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>
<!-- End Blogger Archive Calendar -->

Нажимаем СОХРАНИТЬ и идем в блог любоваться первыми результатами.

Руссификация виджета состояла в изменении английских слов на русские. Мои изменеия выделены бледно-розовым и вы их можете изменить.

Строчка ul.appendChild(li); веделена бледно-зеленым, если вы НЕ хотите под календарем показывать список сообщений за месяц удалите её. Кайл, например, её удалил (в его случае список постов получался слишком длинным ведь среднем у него 40-50 постов за месяц).

4. Переходим к наведению красоты в календаре. для этого добавим описания CSS стилей нашего календаря в шаблон.

Лично мне уже нравится как получилось, но можно продолжить.

1) Находим у себя в шаблоне строчку ]]></b:skin>

И далее идем по ссылке: Blogger Archive Calendar Styles Здесь автор этого "хака" показывает несколько стилей календарей и от вас только требуется выбрать понравившийся вам стиль календаря, скопировать код размещенный под картинкой и вставить этот код ПЕРЕД строчкой ]]></b:skin>

Что до нас с Кайлом мы подбирали цвета для календаря самостоятельно через вкладку Дизайн - Шрифты и цвета.

Чтобы у нас эта возможность появилась, ПЕРЕД строчкой ]]></b:skin> вставляем следующий код:

/* Archive Calendar Variable Setups
Do not modify unless you know what's what
=========================================

<Variable name="bcCalenderFonts" description="Календарь: размер шрифта"
type="font" default="normal normal 100% Tahoma, Arial, Sans-serif" / value="normal normal 100% Tahoma, Arial, Sans-serif">
<Variable name="bcTableBackgroundColor" description="Календарь: Цвет фона"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcTableBorderColor" description="Календарь: Цвет рамки"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcTableTextColor" description="Календарь: Цвет текста"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcMenuBackgroundColor" description="Календарь: Цвет фона Меню выбора"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcMenuTextColor" description="Календарь: Цвет текста в Меню выбора"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcTableHeaderBackgroundColor" description="Календарь: Цвет фона заголовка"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcTableHeaderTextColor" description="Календарь: Цвет текста заголовка"
type="color" default="#000000" value="#FAFA0E">
<Variable name="bcTableHighLightColor" description="Календарь: Цвет выделенного"
type="color" default="#cccccc" value="#77563F">
<Variable name="bcCalenderLinksColor" description="Календарь: Цвет ссылки"
type="color" default="#0000ff" value="#FAFA0E">
<Variable name="bcCalenderLinksHoverColor" description="Календарь: Цвет ссылки при наведении"
type="color" default="#0000ff" value="#cc0000">
<Variable name="bcTableFooterBackground" description="Календарь: Цвет фона нижней части"
type="color" default="#ffffff" value="#8D715C">
<Variable name="bcFooterLinksColor" description="Календарь: Цвет ссылки нижней части"
type="color" default="#0000ff" value="#FAFA0E">

===========================================
End Archive Calendar Variables */


/* Archive Calendar CSS
----------------------------------------------- */

/* div that holds calendar */
#blogger_calendar { margin:5px 0 0 0;width:98%;}

/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid $bcTableBorderColor;padding:2px;margin:10px 0 0;background:$bcMenuBackgroundColor;font:$bcCalenderFonts}

/* The Archive Select Menu */
#bcaption select {background:$bcMenuBackgroundColor;border:0 solid $bcMenuBackgroundColor;color:$bcMenuTextColor;font-weight:bold;text-align:center;}


/* The Heading Section */
table#bcalendar thead {}

/* Head Entries */
table#bcalendar thead tr th {width:20px;text-align:center;padding:2px; border:1px outset $bcTableBorderColor; font:$bcCalenderFonts;background:$bcTableHeaderBackgroundColor;color:$bcTableHeaderTextColor}

/* The calendar Table */
table#bcalendar {border:1px solid $bcTableBorderColor;border-top:0; margin:0px 0 0px;width:95%;background:$bcTableBackgroundColor}

/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset $bcTableBorderColor; color:$bcTableTextColor;font:$bcCalenderFonts;}

/* Links in Calendar */
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:$bcCalenderLinksColor;}
table#bcalendar tbody tr td a:hover {color:$bcCalenderLinksHoverColor;}

/* First Row Empty Cells */
td.firstCell {visibility:visible;}

/* Cells that have a day in them */
td.filledCell {}

/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}

/* Cells with a Link Entry in them */
td.highlightCell {background:$bcTableHighLightColor;border:1px solid $bcTableBorderColor}

/* Table Footer Navigation */
table#bcNavigation {width:95%;background:$bcTableFooterBackground;border:1px solid $bcTableBorderColor;border-top:0;color:$bcTableTextColor;font:$bcCalenderFonts;}
table#bcNavigation a:link {text-decoration:none;color:$bcFooterLinksColor}
td#bcFootPrev {width:10px;}
td#bcFootAll{text-align:center;}
td#bcFootNext {width:10px;}
ul#calendarUl {margin:5px auto 0!important;}
ul#calendarUl li a:link {}

И вот что у нас в результате получилось:

Всем удачи и хорошего настроения!
Побольше отдыхайте и поменьше работайте!

Света




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

Blogger: Настройки канала сайта!

Эту красивую фотографию мы сделали, когда в прошлом году ездили в отпуск к Челите в Израиль. Отпуск получился совершенно сказочным и угадайте почему я вам показываю эту фотографию... Да-да, все совершенно верно! Мы опять собираемся в отпуск и опять в Израиль и снова к Челите! Так что мы пропадем из вашей жизни на 2,5-3 недели... но вы не расстраивайтесь, мы обязательно вернемся!

Но это все лирика, давайте я напишу что-нибудь коротенькое и полезное и пусть это будет пост из серии Ответы на письма.

В последнее время участились письма с вопросами:

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

И очень расстроенный смайлик в конце повествования.

Чтобы понять, что происходит давайте подумаем как мы узнаем о том, что кто-то из наших любимых авторов написал что-то новое. Во-первых, можно просто регулярно заглядывать в свой любимый блог и смотреть не появилось ли там что-то новое. Года полтора назад я сама так и делала (честно-честно), но с тех пор как я стала вести этот блог и познакомилась с русскоязычной блогосферой такой разнообразной и интересной, блогов за обновлениями которых я слежу стало слишком много, а изменения в них я отслеживаю через Список Чтения, что расположен внизу на Панели инструментов:

Таким образом я получаю информацию о новых статьях в почти 100 блогах и информационных лентах (почти, потому что на сегодняшний момент их 99), не имея своего аккаунта на Twitter'е, я через Список чтения слежу за Твиттер-лентой новостей Blogger'а. Кстати, добавить что-либо в Список чтения очень просто: Нажимаем ДОБАВИТЬ вставляем url (адрес блога или ленты, которую собираемся читать) и на следующем шаге выбираем способ чтения с Общедоступным именем или Анонимно.

А теперь только представьте, что случилась такая беда, и ваши новые посты больше не отображаются у меня и не только у меня, а у всех ваших постоянных читателей в списке чтения... Что делать?!!

В 90% случаев это лечится изменением в Настройках Канала Сайта / Settings for Site Feed (которые... кто-то когда-то зачем-то в вашем блоге поменял, потому что если бы не менял, то ничего бы плохого не случилось бы ...)

Давайте по порядку.

Что такое канал сайта или site feed? Канал сайта это некий документ специального формата, который рассказывает всему миру о том что нового у нас происходит в блоге и в нашем случае ответственным за этот файл является Blogger.

Именно Blogger генерит для нашего блога этот документ в специальном формате, в котором описывает все изменения происходящие в нашем блоге, в основном такие как добавление новых постов и комментариев. Возможно, должно отслеживаться и удаление постов, но к счастью для нас оно, похоже, не отслеживается... Помнится, год назад мы помогли одной блогерше восстановить все случайно удалённые из её блога посты используя для этого Яндекс.Ленту (этот способ намотать на ус всем - как можно восстановит случайно удаленный пост!)

Итак, на начальном этапе Blogger генерит feed или канал сайта (как мы выяснили документ об изменениях в блоге) ........ а на конечном этапе мы узнаем о том что в блоге Постоянным Читателем, которого мы являемся, появился новый пост. После этого я радостно кликаю на ссылку в моем списке чтения и иду читать что-то новое и интересное. Кайл читает интересующие его новости в Google Reader, а я вот еще имею Яндекс.Ленту. Google Reader и Яндекс.Лента называются приложениями-агрегаторами (здесь калька с английского agregator - я бы перевела как собиратель), эти приложения регулярно по расписанию заглядывают в те самые документы специального формата, который описывают сделанные вами изменения и показывают вам в неком унифицированном виде все новые статьи со всех каналов сайтов, которыми вы интересуетесь. Кстати, многие современные браузеры умеют агрегировать (т.е. собирать) для вас информацию из каналов.

Мы поговорили о начальном этапе производства feed'а и конечном этапе чтения новостей через специальные приложения и этого по большому счету было бы достаточно... Но в работе с feed'ами или каналами сайта может быть еще промежуточный этап. Многие продвинутые блоггеры, зная что многие читатели не будут заходить к ним в блог, каждый день проверить, что там появилось нового, а захотят воспользоваться современным способом сбора информации о новостях на интересных им блогах (т.е. они захотят подписаться на их блог). Ну, так вот эти продвинутые блоггеры часто используют специальные сервисы, помогающие 1) предоставить читателям наиболее удобный для них способ подписки; 2) получать статистику о динамике подписки, просмотрах статей и переходах на сайт; 3) показывать рекламу на своем канале сайта. Этот дополнительный сервис можно получить, если поручить FeedBurner заниматься каналом вашего сайта (или Зажечь Фид как они это называют). И если все грамотно сделать и настроить, то да вы получите все указанные выше преимущества. О настройках FeedBurner я сегодня рассказывать не буду (все-таки я собиралась написать короткую такую статейку), напишу в другой раз если вы захотите, но упомянуть о нем я была просто обязана, чтобы вы смогли разобраться с Настройками Канала сайта.

Итак, переходим собственно к настройкам:

Панель инструментов -- Настройки -- Канал сайта

Страничку настроек можно увидеть в двух режимах: в Основном или Дополнительном режиме.

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

Канал сообщений блога.
Канал комментариев блога.
Каналы комментариев к каждому сообщению.

При настройке каналов Основном режиме мы единообразно настраиваем настраиваем все 3 канала блога.

Т.е. что мы выберем в параметре Разрешить каналы блога: Полный, Краткий или Ни одного, то и будет прописано для всех трех каналов блога. Лично я всегда отдаю в новостной канал сообщения целиком (т.е. в параметре Разрешить каналы блога у меня стоит Полный), возможно потому что для меня отдача сообщения целиком в канал блога это еще один способ резервного копирования информации (я же рассказывала выше как мы все удаленные посты у одной блогерши восстановили), а что касается комментариев блога и к каждому сообщению -- для меня это вообще очень важно, я очень надеюсь, что хотя бы некоторые читатели подписываются на комментарии, потому что там действительно разворачиваются интересные обсуждения, и кто знает когда я на основе некоторых из них напишу отдельный пост, и так же я надеюсь, что читатели оставившие комментарий к какому-нибудь посту тоже подписываются на рассылку, дело в том что на комментарии я отвечаю всегда, но иногда не очень (мягко говоря) сразу, как время бывает... так что подписка на комментарии тоже очень полезна.

Вполне могу предположить, что некоторые блоггеры предпочитают отдавать сообщения не целиком а в кратком варианте (т.е. показать читателю только начало поста, заинтриговать, а остальное пусть идет по ссылке и читает в самом блоге) тогда выбираем Короткие (почему они поставили это прилагательное в множественном числе я не знаю). В этом случае, возможно стоит перейти в Дополнительный режим и определить для комментариев все-таки Полный вид сообщений в канале.

А теперь самый важный параметр (Ради чего собственно статья и написана!)

URL переадресации канала сообщений

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

Еще раз если вы поручили службе FeedBurner заботится о вашем фиде (канале сайта), то на FeedBurner появится ваш фид и вы совместно с FeedBurner придумаете url для этого канала, вот например для FeedBurner-фида этого блога я придумала такой адрес: http://feeds.feedburner.com/4blogger и именно эта ссылка у меня размещена на боковой панели и именно этот адрес я прописала в параметр URL переадресации канала сообщений.

Если же для обслуживания канала вашего блога у вас никаких сторонних служб не задействовано, то оставляете поле пустым.... потому что если вы туда чего-нибудь поставите Blogger решит, что заниматься вашим каналом будут ТАМ и перенаправит всю информацию о поступлении новых сообщений вашего блога ТУДА и на этом как тот самый Мавр умоет руки, потому как говорить вашим подписчикам о новинках вашего блога это уже ни его забота.... ТАМ позаботятся (вы же сами ему так и сказали!)

И последний параметр (только для тех кто отдает в канал сообщения целиком):

Нижний колонтитул канала сообщений
Здесь можно написать какой-нибудь Html-код, который читатель канала будет видеть после каждого вашего сообщения у меня это не мудрствуя лукаво:

Опубликовано в блоге:
<br/><a href="http://blogger4you.blogspot.com">ВСЕ для BLOGGER(а) на BLOGSPOT(e)!</a>

И напоследок адреса каналов вашего блога:

Канал постов целиком:
Atom 1.0: http://blogname.blogspot.com/feeds/posts/default
RSS 2.0: http://blogname.blogspot.com/feeds/posts/default?alt=rss

Канал комментариев:

Atom 1.0: http://blogname.blogspot.com/feeds/comments/default
RSS 2.0: http://blogname.blogspot.com/feeds/comments/default?alt=rss

Канал Ярлыков:

Atom 1.0: http://blogname.blogspot.com/posts/comments/default/-/labelname
RSS 2.0: http://blogname.blogspot.com/feeds/posts/default?alt=rss/-/labelname

Канал комментариев к отдельным постам:

Atom 1.0: http://blogname.blogspot.com/feeds/postId/comments/default
RSS 2.0: http://blogname.blogspot.com/feeds/postId/comments/default?alt=rss

Адреса каналов взяты из справочной системы Blogger'а


Всем Хорошего Настроения и
Не Забывайте Отдыхать!
Света

PS Уж коли я упомянула о резервном копировании очень рекомендую эту подборку статей (для тех кто еще не читал): Blogger Сохранение и Восстановление.


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

Сделать на Blogger'е сайт - Убираем лишнее!

Здравствуйте! Вот под такой маской мы и будем прятать некоторые характерные Blogger'овские признаки.

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

Да, это возможно сделать! Да на мой взгляд это очень экономный способ создания сайтов (особенно сайтов визиток без реализации на них системы приема заказов, оплаты и т.д.). Если вы когда-нибудь возьметесь создать бизнес-сайт для приятелей, для себя или за деньги вам придется найти красивый шаблон, придумать систему навигации: что показываем на горизонтальном меню, что на боковой/боковых колонках. Как организовать посты по ярлыкам или по датам, чтобы иногда показывать сразу несколько подряд. И об этом обо всем я вам рассказывать не буду. Я только дам несколько идей, что можно "удалить" из шаблона или изменить в настройках, чтобы ваш блог выглядел максимально похоже на сайт.

Что же, давайте попробуем... Еще раз повторю Блоггерам этого делать не надо!

1. Какие возможно вам захочется сделать изменения в настройках:

Итак, Панель инструментов -- Настройки

1) На вкладке Основные сведения возможно вы захотите поставить напротив параметра
Показывать ссылки на отправку электронной почты? Нет

2) На вкладке Форматирование возможно стоит изменить количество сообщений на главной странице - это самый первый параметр
Показать -- ставим 1 сообщение, которое будет как бы главной страницей нашего сайта, в конце концов в одно сообщение можно поместить все что угодно.

3) На вкладке Комментарии можно поменять значение параметров

Настройка по умолчанию для комментариев в сообщениях на У новых сообщений нет комментариев (это чтобы не забывать отключать комментарии). Комментарии можно потом включить только в одно сообщение, которое назвать "Мнение заказчиков" или "Гостевая книга" и это будет очень неплохо смотреться.

Обратные ссылки поставим Скрыть

Настройка по умолчанию для обратных ссылок в сообщениях ставим В новых сообщениях нет обратных ссылок

2. Теперь будем убирать из шаблона всю дополнительную, ненужную информацию. Ведь все нужное вы ведь и так способны руками написать в сообщении: и автора если надо -- не обязательно показывать ваш Blogger'овский профайл на ЭТОМ проекте и дату публикации и даже ярлыки, которые вы возможно будете использовать.

Для начала пара слов о технике безопасности:

А. НЕ ЗАБЫТЬ СДЕЛАТЬ РЕЗЕРВНУЮ КОПИЮ ШАБЛОНА!
Б. Все изменения выполнять пошагово. После каждого сделанного изменения нажимать кнопку ПРОСМОТР и если все выглядит хорошо СОХРАНИТЬ ИЗМЕНЕНИЯ.

Все изменения делаем при поставленной галочке на Расширить шаблоны виджета

1) Убираем Ссылку на автора (она не совсем ссылка, но неважно, мы её все равно удалим)

Ищем и убираем из шаблона следующий кусок кода:

<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>

Искать можно по строке data:top.authorLabel

2) Убираем Отметку времени (в конце поста).

Как правило за куском кода из предыдущего пункта следует кусок кода, описывающий Отметку времени:

<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>

Его находим с помощью следующих характерных подстрок data:top.showTimestamp или data:post.timestamp и удаляем.

3) Убираем Дату перед постом. В обычных шаблонах ей соответствует код:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Его находим по подстроке data:post.dateHeader и удаляем.

4) Удаляем Blogger'овскую навигацию (т.е. ссылки Предыдущие, Следующие, Главная страница) из вашего шаблона.

Находим строчку

<b:include name='nextprev'/>

и удаляем её.

5) Возможно вам не нравится строчка внизу вашего блога (ой, простите, сайта): Subscribe to: Posts (Atom) (Трюк взят из блога Кайла, на ведение которого я его старательно подбиваю As The Donut Turns!)

Её тоже можно убрать. Для этого мы вставим строчку.

.feed-links {display: none; }

А вставить её можно сразу после строчки <b:skin><!--[CDATA[</span>

6) Про то как убрать Navbar я уже рассказывала.

7) Если вы решили использовать Ярлыки для структуризации информации на вашем сайте, сделанном на движке Blogger, то

a) возможно, когда вы будете показывать несколько постов подряд, вы не захотите, чтобы заголовки этих постов были кликабельны. Исправляем ситуацию так:

Находим в шаблоне строчки:

<a expr:href='data:post.url'><data:post.title/></a>

и всех из заменяем её на
<data:post.title/>

б) не захотите показывать ярлыки внизу сообщения

Находим кусок кода:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

и удаляем его

в) так как Blogger'овскую навигацию Предыдущие - Следующие мы удалили, захотите показывать сразу ВСЕ сообщения с данным ярлыком на одной странице. Тогда к url ярлыка надо дописать ?max-results=100 уж больше 100 сообщений на одну тему у вас же не будет (мы вообще разговариваем о создании небольшого сайтика) по умолчанию постов будет показано не более 25 (так что этот совет наверное вам не потребуется).

г) возможно статусное сообщение Blogger'а типа:

Показаны сообщения с ярлыком ЯЯЯ. Показать все сообщения

вас тоже не порадует. И его мы тоже уберем.

Не расширяя шаблонов виджета, находим строчку:

]]></b:skin>

и ПЕРЕД ней вставляем следующий код:

#main .status-msg-border {
height: 0px;
visibility: hidden;
display: none;
}

#main .status-msg-body {
height: 0px;
visibility: hidden;
display: none;
}

#main .status-msg-wrap {
height: 0px;
visibility: hidden;
display: none;
}

#main .status-msg-hidden {
height: 0px;
visibility: hidden;
display: none;
}

#main .status-msg-border {
height: 0px;
visibility: hidden;
display: none;
}

#main .status-msg-wrap {
height: 0px;
visibility: hidden;
display: none;
}

#main .status-msg-bg {
height: 0px;
visibility: hidden;
display: none;
}

Не претендуя на полноту, статья явилась попыткой свести вместе все ответы, которые я когда-либо давала на вопрос Как можно удалить из шаблона Blogger'а информацию о ...?

Если будут еще вопросы на эту тему (а вы, пожалуйста, задавайте их) ответы буду дописывать прямо здесь...

Рекомендации 1, 2, 7б я попыталась здесь написать в самом общем виде. Издержкой этого подхода могут быть пустые блоки (полоски) под постом. Добиться удаления этой информации можно проще: для этого удалить ВЕСЬ БЛОК начинающийся с

<div class='post-footer-line post-footer-line-1'>
и до закрывающего </div>

Проблема может быть только одна - у вас в шаблоне может строчки <div class='post-footer-line post-footer-line-1'> и не найтись, вернее будет что-то аналогичное, но с другим именем.

Всем Удачи и Счастья!
Света


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

Blogger: Новый переводчик от Google.

Google стирает границы!

Всем доброго времени суток! Ребята из Google проделали невероятную работу и обновили (на самом деле разработали) фантастический online переводчик. Опробовав это переводчик в течении недели, осмелюсь сказать, что ЭТОТ переводчик - лучшее, что сейчас есть в области автоматического перевода страниц:

1) Кроме того что он работает теперь с 52 языками (т.е. вашу страницу теперь можно перевести на 51 язык);
2) Качество перевода радикально улучшилось;
3) Теперь он переводит даже тексты опубликованные на странице по средством JavaScript'а.

Работает он как и все в интернете в зависимости от браузера. Пожалуй из недостатков я могу отметить только одно: он как все у Google слишком умный. И в настоящий момент невозможно управлять появлением верхней (светло голобой) панели управления переводом. Т.е. в зависимости настроек языка в браузере Переводчик показывает верхнюю панель сразу и предлагает перевести страницу на язык настроенный в браузере вашего компьютера или панель перевода показана не будет, а будет показана только если вы выберете в гаджете переводчика язык, на котором хотели бы почитать эту страницу.

Разумеется, это только ваш выбор устанавливать у себя этот переводчик или нет. Если для вас важно чтобы иноязычные посетители легко читали вашу страницу - я его очень рекомендую (несмотря даже на эту светло голубую панель перевода, которая иногда может выглядеть неуместно).

Код можно получить по адресу: http://translate.google.com/translate_tools Вы выбираете язык с которого будет осуществляться перевод (язык, на котором вы пишите статьи) и языки на которые вы хотите чтобы был возможен перевод (я выбрала, что переводить нужно на ВСЕ доступные языки).

И вот такой код я получила для этого блога:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'ru'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Ни добавить ни убавить в этом коде почти нечего. Разве что у Кайла в блоге Windows to Russia мы немножко повозились вписывая его (гаджет перевода) в дизайн блога:
И код в результате получился такой:

<center><div id="google_translate_element" style=" padding: 10px 0px 0px 700px;"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en'
}, 'google_translate_element');
}
</script><script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></center>

Все изменения я выделила и подробно их описывать не буду. Только хочу чтобы вы знали, что скрипт можно заключить в теги center - и тогда он разместится по центру. В тег div можно добавить описатель стиля style и двигать гаджет с помощью него, и кстати div можно заменить на пример span.

Как всегда гаджет добавляем на вкладке Дизайн нашей Панели инструментов. Кликаем на Добавить гаджет и из списка доступных гаджетов выбираем прямоугольничек на котором написано Html/Javascript.

И еще несколько слов о переводчике Google:

1) Если вы НЕ хотите чтобы Переводчик Google переводил вашу страницу в метатеги добавьте строчку: <meta name="google" value="notranslate">

2) Чтобы не был выполнен перевод отдельных частей вашей страницы добавьте class="notranslate" в Html - элемент документа или еще проще поместите вокруг куска, который вы не хотите переводить теги <span class="notranslate"> и </span>

Зачем это может пригодиться, а чтобы при переводе не получить вот такой код для вставки в блог, как вы видите справа. Код был размещен у Кайла в блоге и затем переведен на русский с помощью гаджета Переводчика.

И Пусть Мир Вас Понимает!
Света
PS О других автоматических переводчиках в интернете читаем:Blogger: Переводчик у вас в болге!



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

Blogger: Как вставить 'Читать дальше' и чтобы боковая колонка осталась на месте.

У Blogger'а юбилей!
Blogger'у сравнялось 10!
Blogger дарит подарки!
... а мы учимся их использовать ;)

Сегодня мы с вами поговорим об одном из самых долгожданных Blogger'овских подарках о встроенном в редактор Blogger'а кате или ссылки Читать далее. Объявлена эта возможность уже довольно давно и я, как и все люди следящие за развитием Blogger'а , её попробовала сразу после объявления... В то время я заканчивала писать другую статью, а потом собиралась очень коротко об этой возможности написать... И тут со всех сторон посыпались жалобы на этот самый Blogger'овский кат: люди писали письма и комментарии, спрашивали в Russian Blogger Help Group (по-русски). Люди жаловались, что при использовании встроенного Blogger'овского ката, боковая колонка сваливается в самый низ блога(!)

Глядя на все это я поняла, что пост про новый Blogger'овский кат я писать НЕ БУДУ пока эта проблема не будет решена. Теперь решение найдено и в этом посте я объединю сразу два: о новой опции редактора Blogger'а - встроенном в редактор кате и о решении проблемы сползания (уползания) боковой колонки.

Но давайте обо всем по порядку.
Читать дальше...

Blogger: Устанавливаем гаджет Рекомендовать от Google Friend Connect

Лучшее в блоге (мнение читателей).

Здравствуйте! Реально речь пойдет не о том что я считаю лучшим в этом блоге или Постоянные Читатели рекомендуют здесь почитать (об этом вы сможете узнать самостоятельно, взглянув на боковую колонку в раздел где такими красными буквами на ярко-желтом фоне написано "Читатели рекомендуют:"), а здесь я всего лишь расскажу о гаджете Рекомендовать! от Google Friend Connect, который у меня здесь и работает.

Как установить гаджет Google Friend Connect Рекомендую
в вашем блоге на Blogspot'е:

1) Идем на сайт Google Friend Connect: http://www.google.com/friendconnect/

2) Из списка своих блогов выбираем блог, на который мы хотим установить гаджет рекомендую и кликаем на него. Вот, я например сейчас решила установить этот гаджет еще на один свой блог Russian Video from Russia (соединю приятное с полезным, а вам картинки будут ;)).

3) Кликаем на "Social gadgets" и выбираем гаджет Recommendation.
4) Постепенно двигаемся сверху вниз по странице настройки гаджета Рекомендации:

I. Настраиваем Лист рекомендаций (Configure the recommendation list). Здесь все просто - слова в заголовках можно менять на русские, можно поменять количество ссылок показываемых за один раз (чтобы увидеть остальные читатель должен будет кликнуть Дополнительно на этом гаджете). Подбираем ширину, цвета и тип шрифта для гаджета, которые подойдут для нашего блога. (Делаем это аналогично с тем как мы делали при установки гаджета Комментарии от Googole Friend Connect: Blogger: Комментарии от Intense Debate vs Google Friend Connect).

II. Настраиваем Кнопку "Рекомендовать" (Configure buttons). Здесь уже начинаются тонкости и если кнопку мы в принципе можем выбрать любую: с сердечком или с галочкой, расширенного формата или маленькую и даже поменять на ней надпись. Все это дело вкуса.

А дальше вам необходимо определиться - будете ли вы показывать эту кнопку Рекомендовать после каждой статьи на главной странице блога или только на странице самой статьи.

Если вы предполагаете, что на одной странице может быть показано несколько кнопок (например, на главной странице блога можно размещать кнопку под каждой статьей).

То ставим галочку на поле "Advanced options for multiple buttons on a page" (Дополнительные опции для нескольких кнопок на странице). И там на против каждого поля: Link text и Link URL выбираем "Custom".

III. Теперь самое простое кликаем на кнопку Generate code (Сгенерировать код). И получаем два куска кода.

Первый кусок кода: про него они пишут Add this to the page where you'd like the aggregation gadget to appear надо добавить на боковую колонку вашего блога или в место на вашем шаблоне где вы хотите чтобы висел Список рекомендованного.

Второй кусок кода, а про него они пишут Add this to the pages where you'd like a button to appear добавить в то место, где вы хотите чтобы была кнопка Рекомендовать. Я думаю в нашем случае будет идеально добавить код в качестве Постскриптума (см. Blogger: Постскриптум для ВСЕХ постов вашего блога!)

IV. Предупреждение о том что сгенерированный на шаге III код может быть размещен только в том блоге для которого мы его сгенерили.

5) Со страницей гаджета Рекомендаций мы закончили, а теперь давайте грамотно установим код в шаблон блога.

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

А тем кто хочет чтобы кнопка Рекомендовать была показана для каждой статьи на всех страницах блога (как у меня здесь), придется еще немного поработать. Да, код мы уже вставили, но кнопка видна на главной странице только после первой статьи....

Будем исправлять ситуацию. Итак, для кнопки мы получили какой-то такой каждый свой код:

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3595719624701175122" style="width:100%;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '73';
skin['FONT_FAMILY'] = 'verdana,sans-serif';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = 'transparent';
skin['ENDCAP_TEXT_COLOR'] = '#FF8000';
skin['BUTTON_STYLE'] = 'modular';
skin['BUTTON_TEXT'] = 'Recommend it to others!';
skin['BUTTON_ICON'] = 'default';
skin['BUTTON_MODULE_PROMO_TEXT'] = 'Did you like this page?';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-3595719624701175122',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 73,
site: '17026078346313475023',
'view-params':{"pageUrl":"http://www.mysite.com/products.html#product1","pageTitle":"Product1","docId":"recommendedPages"}
},
skin);
</script>

Первый набор символов (цифры конечно будут у всех свои) выделенный светло голубым заменяем выражением:
expr:id='data:post.id'
Второй набор символов, выделенный светло зеленым заменяем выражением:
'<data:post.id/>'
Третье выражение заменяем (выделенное розовым) на следующее:
"<data:post.url/>"
И, наконец четвертое выражение (выделенное светло лиловом) заменяем следующим:
"<data:post.title/>"

После внесения всех изменений как всегда нажимаем сначала ПРОСМОТР если кнопки появились, нажимаем СОХРАНИТЬ, если нет или только одна внимательно смотрим сравниваем исправляем ошибки и нажимаем ПРОСМОТР. Если процесс надоел и ничего не получается нажимаем ОТМЕНИТЬ ИЗМЕНЕНИЯ и возвращаемся к этому развлечению позже - например, на растущей Луне [говорят очень хорошо все получается! ;)]

6) Небольшой совет: не стесняйтесь рекомендовать свои статьи сами. Ваши рекомендации очень важны для читателей! И маленькое наблюдение: Гаджет "Рекомендации" у меня работал везде, кроме одной из моих самых любимых статей: Blogger: "Читать далее" для самых ленивых или газетный стиль вашего шаблона. Оказалось все дело было в двойных кавычках, когда я их изменила на одинарные - гаджет Рекомендовать появился, но большинство читателей уже прочитало эту статью без гаджета. Вот так оно и бывает....

Пусть каждый ваш день будет удачным!
Света

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