Blogger: Чердак и подвал у вас в шаблоне.

Здравствуйте! Когда я выбираю картинки к своим постам, я всегда отдаю предпочтение детским работам. Сегодня это работа Кати Вертоградовой, которая учится в 5 А классе гимназии 1565. Вот на этой страничке я взяла эту работу, а вы можете сходить и проголосовать за неё.

Проголосовали, вернулись? А теперь давайте перейдем от моих художественных пристрастий к собственно привидениям. А к привидениям, потому что они, как мне кажется, живут в основном по чердакам и подвалам... Возможно, я и неправа... воспоминания у меня как-то остались от Карлсона, который на чердаке притворился привидением и напугал местных воров. Ну, да ладно, давайте организуем в макете нашего блога чердак и подвал, а уж кем их заселить и что в них хранить вы будете решать самостоятельно. На чердаке можно например показывать горизонтальное слайд-шоу самых лучших картинок из своего блога (Blogger: Создаем горизонтальное слайд-шоу).

Вот что я имею в виду:


У кого таких подвала и чердака нет, и кто хочет себе их построить, читаем инструкцию:

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

1. CSS - описание для чердака или подвала:

Чердак:

#top-wrapper {
width: 900px;
margin: 0 auto;
background: $top_bg;
color: $top_color;
font-size: 100%;
}

Подвал:

#bottom-wrapper {
width: 900px;
margin: 0 auto;
background: $bottom_bg;
color: $bottom_color;
font-size: 100%;
}

Теперь давайте я вам объясню, что в этих описаниях есть что:

width - это по английски ширина. Найдите самую широкую часть вашего блога (называться она может поразному) и поставьте вместо моих 900px сколько там у вас их (в смысле пикселей) нашлось. Кто использует "резиновые шаблоны" (у вас ширина измеряется не в пикселях, а в процентах) ставит width 100%.

background - фон мы сказали, что фон будет задаваться в переменной top_bg (для чердака) и bottom_bg (для подвала)

color - цвет шрифта тоже для удобства вынесем в переменные: top_color (для чердака) и bottom_color (для подвала)

font-size - размер шрифта я для начала поставила 100% но вы потом можете уменьшить или увеличить размер шрифта в зависимости от ваших потребностей

1а. Куда поставить CSS описания чердака и подвала:

Я предлагаю в вашем шаблоне найти строчку ]]></b:skin> и ПЕРЕД ней добавить наши описания.

Раз уж мы с вами решили все делать удобно и по науке, т.е. вынесли описания цветов фона и шривта в переменные, то

2. Давайте эти переменные опишем:

<Variable name="top_bg" description="Цвет фона на чердаке"
type="color" default="#ffffff" value="#ffffff">
<Variable name="bottom_bg" description="Цвет фона в подвале"
type="color" default="#ffffff" value="#ffffff">
<Variable name="top_color" description="Цвет шрифта на чердаке"
type="color" default="#000000" value="#000000">
<Variable name="bottom_color" description="Цвет шрифта в подвале"
type="color" default="#000000" value="#000000">

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

Следующий вопрос куда эти описания цветов поставить... Очень вероятно, что у вас в HTML-коде шаблона есть такая строчка:

/* Variable definitions

Она обычно располагается очень близко к началу

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

Все описания сделаны осталось последнее вставить их на конкретное место в структуре блога.

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

Внимание! Чтобы совсем не запутаться галочку на РАСШИРИТЬ ШАБЛОНЫ ВИДЖЕТА мы НЕ СТАВИМ.

3. Изменения в структуре шаблона.

Это самая трудная для объяснения-описания часть, потому что во многих шаблонах используются разные названия для структурных единиц. Я попробую, что-то по этому поводу написать, а вы если что-то не найдете или у вас будет не получаться спрашивайте.

а) Прежде всего находим начало <body>

не далеко от <body> видим описание заголовочной части блога. Оно очень похоже на это:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Заголовок вашего блога (Header)' type='Header'/>
</b:section>
</div>

И теперь после закрывающего </div> можно вставить наш чердак:

<div id='top-wrapper'>
<b:section class='topper' id='topper'/>
</div>

Проверьте если ничего в шаблоне не испортилось, то можно сохранить изменения.

б) А подвал разумеется будем вставлять внизу кода.

Идем в самый низ нашего кода видим строчки:

</div>
</body>
</html>

ПЕРЕД </div> вставляем код для нашего подвала:

<div id='bottom-wrapper'>
<b:section class='bottommer' id='bottommer'/>
</div>

Еще раз проверяем и если ничего в нашем шаблоне не испортилось нажимаем кнопку СОХРАНИТЬ.

Теперь идем в Элементы страницы и видим новые места в Макете куда можно добавить гаджеты. Идем в Шрифты и цвета и меняем скучную черно-белую раскраску наших чердака и подвала на более соответствующую цветам вашего блога.

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

А пока всем удачи и
хороших праздников!

Света


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