Подсказки блоггеру: Новое оформление для блога

Наступил новый год, и хочется перемен. Наш блогодомик не исключение, и можно подарить ему новое оформление. Существует несколько вариантов смены дизайна нашего блога, сегодня мы их с вами рассмотрим.
1. Установка и настройка готовых отдельных элементов дизайна
2. Установка и настройка готового шаблона в формате *.xml
3. Установка и настройка собственного дизайна
 Рассмотрим эти варианты подробнее. Начнем с первого варианта. вы знаете, что существуют сайты, на которых есть уже готовые, разработанные специально для платформы blogger.com, элементы дизайнов (шапки, боковые панели, баннеры, разделители). Причем некоторые сайты ориентированы на оформление именно рукодельных блогов. Наиболее известные это:

• http://shabbyblogs.com/
• http://thecutestblogontheblock.com/

Внимание!! Перед установкой/сменой дизайна необходимо создать резервную копию Вашего блога!!! И запомнить папку на компьютере, в которую Вы эту копию сохранили. Подробную инструкцию можно посмотреть здесь.
Рассмотрим установку нового оформления на примере элементов с сайта http://shabbyblogs.com/. Меню этого сайта представлено на рисунке 1

Рисунок 1

Нас будет интересовать пункт "DESIGNS". Нажав на него мы попадем в список категорий (рисунок 2)

Рисунок 2

Мы для начала воспользуемся категориями "BACKGROUNDS" (фоновый рисунок/оформление боковых панелей), "SHABBY HEADERS" (шапки). Дизайнов боковых панелей гораздо больше, чем шапок, но всегда можно подобрать стилистические пары.

Нажав на кнопку категории "BACKGROUNDS" мы переходим на страницу с готовыми панельками (рисунок 3)

Рисунок 3

По умолчанию они идут все подряд и можно их так и просматривать. Но для удобства пользователей предусмотрено меню с левой стороны, где можно выбрать категории оформления, указать размер поля сообщения (Standard или Wide). После того, как был выбран понравившийся стиль необходимо нажать на кнопку под ним "get the code". Появится новое окошко с программным кодом и краткой инструкцией (Рисунок 4)

Рисунок 4

Нам нужно скопировать (сочетание клавиш CTRL+C для Windows  и CMD+C для MacOS) программный код в форме, начиная с самого первого символа и заканчивая последним. Программный код может быть виден не полностью. Поэтому не забываем про команды полного выделения (сочетание клавиш CTRL+A для Windows  и CMD+A для MacOS).

 

Рисунок 5

Теперь можно вставить этот код в любой текстовый редактор, чтобы не потерять. Или не закрывать в браузере страничку с этим кодом. 

Затем мы отправляемся в Блоггер и выбираем основной гаджет с загадочным названием "HTML/JAVASCRIPT" (рисунок 6). Как это сделать мы уже подробно рассматривали в предыдущем уроке.

Рисунок 6

 У нас появится вот такое окошко (рисунок 7)

Рисунок 7

И в форму "Содержание" нам необходимо вставить скопированный программный код. Не забудьте дать гаджету название, чтобы потом легко его можно было найти среди остальных. Сохраняем и применяем изменения к блогу.

Рисунок 8

 Можно пойти и посмотреть что получилось.

Рисунок 9

Выглядит пока что не очень. Поэтому нужно провести более детальную настройку шаблона и дизайна блога. Для этого отправляемся в раздел основного меню "Шаблон" (рисунок 10)

Рисунок 10

Нажимаем кнопку "Настроить" и попадаем в "Дизайнер шаблонов Blogger" (рисунок 11)

Рисунок 11

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

1. Пункт "Шаблон" - шаблоны Blogger, которые идут по умолчанию. Можно просто на основе одного из таких шаблонов создать свой уникальный дизайн, изменяя дальнейшие настройки.
2. Пункт "Фон" - установка цветовой гаммы и загрузка собственного фонового изображения. Можно взять большую картинку, но лучше найти и скачать специальные фоновые рисунки. Они бывают совершенно разной стилистики и немного весят.
3. Пункт "Регулировка ширины" - позволяет изменять ширину наших панелей и области сообщения. (Рисунок 12)
4. "Дизайн" - настройка расположения основных и дополнительных элементов блога. Здесь я выбрала 3 колонки.
5. "Дополнительно" - тонкая настройка шрифтов, цвета и т.д. (рисунок 13, 14)

Нам необходимо подобрать с помощью ползунков оптимальную ширину колонок в блоге.

Рисунок 12

 Потом отправляемся в пункт "Дополнительно" и настраиваем нужные параметры, например цвет, размер(указывается в px и соответствует размерам текста в Word) и начертание шрифта

Рисунок 13

Фоны колонтитулов и панелей. Я выставила для примера значение "transparent" - прозрачный, чтобы был только красивый фон. Но лучше поиграть с этими настройками и посмотреть изменения в самом блоге, так как при таких настройках у меня не очень читается текст на боковых панельках.

Рисунок 14

Сохраняем полученный результат и возвращаемся обратно в Blogger. Результат у меня вышел вот такой - рисунок 15.

Рисунок 15

 Теперь посмотрим как можно сделать красивую шапку. Я скачала более или менее подходящую из раздела "SHABBY HEADERS", нажав кнопку "download". (рисунок 16) Но можно сделать свою собственную, например коллаж из красивых картинок или своих работ.

Рисунок 16

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

Кстати: Можно воспользоваться on-line графическими редакторами, если у Вас на компьютере нет ни одного.

Теперь выбираем пункт меню "Дизайн" - Заголовок - Изменить. Появится окошко рисунок 17

 Рисунок 17

Выбираем с жесткого диска изображение. Если Вы написали название на картинке, то отмечаем пункт "Вместо заголовка и описания" (я этого не делала, поэтому оставила первый пункт). Ставим галочку "Сжать до размеров экрана". Ждем окончания загрузки и сохраняемся. Идем в наш блог и видим приблизительно такой результат.

Рисунок 18

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

Кстати: красивый и уникальный дизайн можно сделать из цифровых скрап-наборов.

 А еще есть вариант установки полностью готового и настроеннного шаблона блога в формате *.xml. Для этого нам нужно скачать понравившийся шаблон с сайта. При выборе такого шаблона нужно учитывать сколько колонок в Вашем блоге и на сколько колонок рассчитан понравившийся шаблон. Также необходимо обратить внимание на какую платформу рассчитан шаблон - очень часто шаблоны идут для WordPress или Joomla. Нам нужен для платформы Blogger.  Я отправилась на один из сайтов с бесплатными шаблонами для Blogger. Выбрала красный и нажала загрузить.(рисунок 19, 19a)

Рисунок 19

Рисунок 19а

Обычно это либо архив, либо папка, которые содержат несколько файлов (Рисунок 20)

Рисунок 20

Нам необходим файл с расширением *.xml (в моем случае это Red-Blog.xml). Его можно открыть любым текстовым редактором, например в Блокноте. Есть два варианта развития событий.

Первый. Идем в пункт "Шаблон", жмем "Изменить HTML"(рисунок 21)

Рисунок 21

Появится вот такое окно с программным кодом текущего шаблона (рисунок 22)

Рисунок 22

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

Рисунок 23

Жмем "Сохранить гаджеты". Идем в блог и видим примененный шаблон (рисунок 24). В исходном блоге у меня нет главного меню со страницами, поэтому и в примененном шаблоне они не отражаются

Рисунок 24.

Второй вариант. Идем в пункт "Шаблон", жмем "Резервное копирование и восстановление", появится новое окно (рисунок 25)

Рисунок 25

Нажимаем кнопку "Выбрать файл" и выбираем файл с нашим шаблоном. Жмем загрузить. И получаем результат аналогичный первому способу. С помощью этого пункта Вы также можете сделать резервную копию Вашего блога, или восстановить блог из резервной копии.

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

Рисунок 26

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

Полезные ссылки:

Фоновые рисунки, фотографии

http://www.istockphoto.com
http://www.lenagold.ru

Готовые шаблоны блогов в формате *.xml
http://btemplate.ru
http://www.bloggerthemes.net/
http://www.standoutblogger.com/blogging/blog-designs-50-of-the-most-creative/

Удачного обновления блога!

Наташа - Inventame

До новых встреч!