3.5.09

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

31 comments

Bсе для 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>

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

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


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

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


Света
Blogger: кошка.

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

31 комментарий:

  1. Добрый день, Светочка!
    Очень нужная штука, которую вы предлагаете! Хочется себе заиметь такую прелесть.
    ...И, вообще - хоть как-то оснастить блоги системой удобной навигации: облако тегов, карта блога и т. д. Мне они кажутся недостижимой целью.
    ...Я панически боюсь влезать в кодировки шаблона.

    ОтветитьУдалить
  2. Спасибо большое вам за то что вы делаете :)
    Все получилось ;)
    Не могли бы вы подсказать, что нужно сделать, чтобы получить "жидкий" блог. Ну, так сказать, когда вид блога не зависит от разрешения экрана читающего. (Так сделано у предыдущего человека, который оставил комментарий (Jusha) и на яндексе так.) Просто я когда баловался с шириной длога - не подумал сохранить шаблон перед редактированием, и, добившись желаемой ширины, успокоился. Может это даже тамо отдельной статьи ;)
    *ушел_добавлять_баннер_вашего_блога_себе*

    ОтветитьУдалить
  3. Юлечка, здравствуйте!

    Главное все делать по-тихоньку... 1) Обязательная резервная копия блога и шаблона (Статьи на эту тему у меня были).

    Затем выберите что-нибудь самое простое... Ну, например убрать NavBar в блоге и сделать это.

    После этого когда вы почуствуете, что вы исправили код, а Конец света не наступил можно идти дальше.

    А еще можно создать специальный блог для тренировочной работы с шаблонами.

    Ой, а аватар теперь какой красивый, ну он у вас всегда красивый! Я просто хотела сказать, что новый ;)

    Удачи во всем и в экспериментах с шаблонами! Если что пишите!

    Света

    ОтветитьУдалить
  4. Николай, здравствуйте!

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

    Немного широковат для разрешения моего монитора: 1024х768, включилась полоса прокрутки - это из-за широкой, но красивой картинки сверху.

    Удачи и спасибо за баннер! ;)
    Света

    ОтветитьУдалить
  5. Кстатм покопался я тут на просторах интернета и поспрашивал у знакомых. И вот что мне посоветовал мне один друг, с которым мы работали как то над сайтом нашего стройотряда: http://www.kvark-sso.moy.su - вот эта страничка мне подала идею. Пойду думать, как это впихнуть вместо картинки в моем блоге. То есть туда надо впихнуть таблицу с примерно таким кодом:

    http://pastie.org/468947 (извияюсь за то что исходник ссылкой - просто попробовал и code и pre - они не хотят отображать код, который я хотел вставить)

    в ней то и реализуется идея: картинка верхняя разрезана примерно на 2 равные части в каком-нибудь графическом редакторе, первая часть картинки фиксированной ширины, а вторая варируется в процентах - в зависимости от ширины окна. Опять же, если свернуть окно браузера со траницей http://www.kvark-sso.moy.su/ и попробовать поменять ширину - она будет меняться. Причем, даже практически не заметнодля глаза, если открывать в разных разрешениях страницу))

    Сайт этот мы забросили в итоге - нашли более перспективную платформу для нашего проекта. Но благо мы его не прекрыли и не удалили с хостинга...

    ОтветитьУдалить
  6. Спасибо большое,и хороших праздников!

    ОтветитьУдалить
  7. Спасибо за интересный пост!
    С нетерпением жду пост про менюшку...

    ОтветитьУдалить
  8. Николай (nixon89), спасибо огромное!

    Код просто наикласснейший! Очень элегантный и работает с надежностью молотка!

    Респект, респект и еще раз респект!

    Света

    ОтветитьУдалить
  9. Менюшки будут, YarRus!

    Сразу после комментариев!

    Удачи во всем,
    Света

    ОтветитьУдалить
  10. Светочка, Вы чудо! Огромнейшее спасибо! Я проделала все на новом блоге,с самым простым шаблоном. Было страшно)).Но получилось! Вы так четко и подробно все объяснили!
    Удачи и самого хорошего Вам!

    ОтветитьУдалить
  11. Иринушка, спасибо большое!!!

    Света
    :)))

    ОтветитьУдалить
  12. Света помогите пожалуйста настроить чердак в этом блоге http://scrap-rostov.blogspot.com/
    Я не смогла найти в шаблоне нужные строчки

    ОтветитьУдалить
  13. Светлана (kattzen), присылайте мне Html-код вашего шаблона, но запаситесь терпением ;).

    Удачи во всем!
    Света

    ОтветитьУдалить
  14. Здравствуйте, Светлана. А можно ли как нибудь приделать "квартирку" - дополнительный вертикальный столбец для гаджетов. Желательно, чтобы он был справа, рядом с существующим.

    ОтветитьУдалить
  15. Квартирку можно, Ноам!

    Но я пока не уверена как об этом рассказать... Т.к. во всех шаблонах используются разные обозначения. Я пока подумаю. А вот читатели ко мне уже с этим вопросом обращались и даже дали ссылку на англоязычную статью, где про это рассказывалось - но у меня руки даже туда заглянуть толком не дошли. Читательница, которая дала ссылку сказала, что методом тыка у неё получилось приделать квартирку. А вот это ссылка: http://thecutestblogontheblock.com/blog-secrets/145-how-to-get-a-3-column-template.html
    Попробуйте, может и у вас получится. Получится или не получится в любом случае пишите.

    Удачи во всем!
    Света

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

    ОтветитьУдалить
  17. Спасибо, Ноам!

    Надо будет найти время и самой туда заглянуть ;).
    Света

    ОтветитьУдалить
  18. Для меня каждый выполненный ваш совет маленькая победа))

    ОтветитьУдалить
  19. Спасибо ! Все получилось. Как раз думал как сделать дополнительные блоки в этих местах. Блог только вчера открыл (http://m-o-b-i.blogspot.com/). Раньше работал с joomla.

    ОтветитьУдалить
  20. Вам спасибо, AAP!

    Не плохо у вас получается!

    Удачи во всем!
    Света

    ОтветитьУдалить
  21. Подскажите все так и сделал а на верху блога появилась надпись как быть с ней?
    http://astromonitoring.blogspot.com/

    ОтветитьУдалить
  22. Астролог, извините, пожалуйста!

    Только что увидела ваш комментарий.

    Берем вот этот код:
    #top-wrapper {
    width: 700px;
    margin: 0 auto;
    background: $top_bg;
    color: $top_color;
    font-size: 100%;
    }
    который у вас после
    <title>Astromonitoring</title>
    стоит

    и располагаем этот код ПЕРЕД вот этой строчкой:
    --></style>

    Удачи во всем!
    Света

    ОтветитьУдалить
  23. Подскажите, как можно сменить кодировку (для всего блога). Пробовал редактировать HTML, так при сохранении прежняя (UTF-8) возвращается на место. А мне хотелось бы windows-1251.
    Заранее спасибо и прошу прощения, что не по теме поста.

    ОтветитьУдалить
  24. Андрей, здравствуйте!

    Похоже, что кодировку на Blogger'е поменять уже нельзя, а чем, кстати, плох UTF-8 если она указывается в HTML-коде, то браузер принимает это к сведению и не перевирает русские буквы.

    Кстати, раньше такая возможность у Blogger'а была в Форматировании были поля:

    Date Language
    Encoding

    но это было очень давно в 2006 году.

    Удачи во всем!
    Света

    ОтветитьУдалить
  25. спасибо за ответ!
    кодировка сбивается при публикации через почту. буду копаться дальше: вроде сами посты уже нормально отображаются, но заголовок все та же белиберда.

    ОтветитьУдалить
  26. Еще раз Вас побеспокою :)
    Интересует, как можно сделать следующее: при публикации сообщения на блоге самому задавать адрес url страницы.
    Т.е. вместо http://blogger4you.blogspot.com/2009/05/blogger-attic-and-basement-in-your.html
    получить примерно http://blogger4you.blogspot.com/attic-and-basement-in-your-blog.html

    Вобщем, самому устанавливать адрес страницы.

    ОтветитьУдалить
  27. Света, здравствуйте. В шаблоне не получается найти нужные строчки. Строчку b:skin нашла, перед ней добавила описание, но ничего не получается( А body не нашла вовсе(( Подскажите, пожалуйста, можно ли для моего блога это настроить? http://culinary-sketches.blogspot.com/ Заранее спасибо.

    ОтветитьУдалить

Популярные сообщения