Мой Красивый Блог - Урок №7

Привет, дорогие!

Ну что ж, вот и последний урок! :) Точнее, это даже не урок, а малюсенький урочек.

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

Сегодня мы поубираем все лишнее в наших домиках!

Скрываем NavBar

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

Прямо на этой панели нажимаем Настроить (либо заходим во вкладку Дизайн в Блоггере).

Наверху справа видим гаджет NavBar - нажимаем Редактировать.

В открывшемся окошке выбираем вариант Выключено.

Сохраняем и - вуаля - одной некрасивостью стало меньше. :)

Есть вариант не убирать навигационную панель полностью, а лишь скрыть ее - в этом случае она будет отображаться при наведении мыши на верхнюю часть блога. Для этого зайдем во вкладку Шаблон и нажмем кнопку Настроить. Здесь выберем вкладку Дополнительно и прокрутим вниз до Добавить CSS.

Вставим сюда следующий код:

#navbar-iframe {

  opacity: 0;

}

#navbar-iframe:hover {

  opacity: 0.5;

}

Сохраняем и проверяем.

---

После того, как вы скрыли NavBar, на месте где она была останется пустое место, которое можно убрать.

Заходим в Шаблон->Изменить HTML.

С помощью клавиш CTRL+F (на Mac Os - CMD+F) находим такую строчку:

body.mobile  {

Прямо над ней вставляем такой код:

body .navbar {height: auto;}

Сохраняем изменения. Пустое место исчезло! :)

Убираем надпись Технологии Blogger

В самой нижней части любого блога на платформе Блогспот отображается надпись Технологии Blogger и название используемого шаблона.

Мы все очень благодарны Блоггеру за предоставление такой хорошей и бесплатной платформы, но от надписи лучше избавимся. :)

Для этого надо зайти во вкладку Шаблон, а затем нажать кнопку Изменить HTML.

Видим окно и много кода. Кликнем в любое место в поле кода и нажмем клавиши CTRL+F (на Mac OS - CMD+F). В появившееся окно поиска вставим такой код и нажмем Enter:

<b:section class='foot' id='footer-3'

Нужный нам код сразу выделится другим цветом.

Заменим весь код <b:section> на такой:

<!-- <b:section class='foot' id='footer-3' showaddelement='no'>

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

</b:section> 

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

</b:section> -->

Он изменит цвет на темно-красный:

Сохраним и полюбуемся результатом - надпись исчезла!

Убираем надпись Подписаться на: Сообщения (Atom)

Внизу всех блогов в шаблонах Блоггера есть строчка, которая предлагает подписаться на сообщения через Atom.

Если у вас есть желание ее убрать, снова заходим в редактирование HTML. При помощи поиска CTRL+F (на Mac OS - CMD+F) находим следующий код:

<b:include name='feedLinks'/>

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

<!--<b:include name='feedLinks'/>-->

Сохраняем и радуемся. :)

Центровка заголовка и даты сообщений

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

Идем в Шаблон -> Настроить -> Дополнительно -> Добавить CSS. Вставляем туда такой код:

.widget {text-align: center;}

Готово!

Домашнее задание:

1. Воспользуйтесь теми рекомендациями из урока, которые вам подходят.

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

В своем посте дайте, пожалуйста, активную ссылку на седьмой урок. Линки для добавления постов будут открыты до 27 марта 12:00 (по Москве). Завершающий пост с итогами будет опубликован 28 марта.

Если у вас появятся какие-то вопросы по этой теме, пишите их в комментариях. Отвечать я тоже буду в комментариях, чтобы вопросы не повторялись. Дорогие, перед тем, как задать вопрос, пожалуйста, проверьте, не задавали ли его уже выше. Давайте общими усилиями экономить наше с вами время. :)