17 января 2013 г.

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

Наступил новый год, и хочется перемен. Наш блогодомик не исключение, и можно подарить ему новое оформление. Существует несколько вариантов смены дизайна нашего блога, сегодня мы их с вами рассмотрим.
1. Установка и настройка готовых отдельных элементов дизайна
2. Установка и настройка готового шаблона в формате *.xml
3. Установка и настройка собственного дизайна
 Рассмотрим эти варианты подробнее. Начнем с первого варианта. вы знаете, что существуют сайты, на которых есть уже готовые, разработанные специально для платформы blogger.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/

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


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

24 комментария :

  1. как интересно...на выходных нужно будет попробовать обязательно! =)

    ОтветитьУдалить
  2. даааа...для меня точно надо целый день разбираться, может и получится(какой же я "чайник"). Наташа молодец, прям завидно. Спасибо ей большое!!! Многим пригодится.

    ОтветитьУдалить
  3. !!!!! Спасибо!!!! очень нужная и полезная информация!

    ОтветитьУдалить
  4. Натуся!!! Умница как всегда! Очень полезно и важно) спасибо огромное))! пошаговой инфы в интернете много, но такой, чтобы было понятно творческим женщинам))))- только в твоих МК! буду пользоваться и другим советовать!!!!

    ОтветитьУдалить
  5. Ого! Наташ, замечательная статья, молодец!

    ОтветитьУдалить
  6. Статья очень нужная и полезная. Боковинки я менять научилась, а вот шапку пока не пробовала. На самом деле после установки нового оформления возможно придётся менять цвет шрифтов, а сделать это гармонично сложно для меня. Ведь важно учитывать не только красиво или нет, но и насколько удобно читателю будет гостить в блоге.
    Спасибо за статью!

    ОтветитьУдалить
    Ответы
    1. Если ставить шаблонное оформление формата *.xml, то все заменится автоматически, так как это предусмотрено самим шаблоном. Если просто боковушки, то возможно и прийдется - просто выбираете контрастный цвет шрифта. Можно сделать непрозрачную подложку под текст.

      Удалить
  7. Огромное спасибо за подробный рассказ и полезные ссылки!

    ОтветитьУдалить
  8. Спасибо, девочки! Очень нужная статья. Наконец, получилось сделать себе шапку ))

    ОтветитьУдалить
  9. Очень полезно, спасибо! но я чувствую себя бабушкой в супермаркете :)) не знаю, осилю ли, а хочется :)

    ОтветитьУдалить
    Ответы
    1. Обязательно осилите - берите самый простой вариант и пробуйте!

      Удалить
  10. Мне бы такую инфу три года назад - столько времени бы сэкономило!! Огромное спасибо!!

    ОтветитьУдалить
  11. Наташа, спасибо! Очень полезно! Думаю, многим пригодится!

    ОтветитьУдалить
  12. Спасибо) очень понятно и полезно)
    ..и правда, чуть раньше бы.. а то я всё то же самое на английском перечитывала и экспериментировала)))

    ОтветитьУдалить
  13. Очень благодарна за такую информацию. Назрел вопрос. Я вставила шапку, а она почему-то малюсенькая, её автоматически сжало и прибило влево. И ни туды и ни сюды. Такая расстроенная сижу(((. У кого-нибудь так было?

    ОтветитьУдалить
    Ответы
    1. Можно попробовать удалить картинку и вставить заново. Киньте прямую ссылку на свой блог - у меня профиль Google+ завис.

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

      Потом я конечно сделаю шапку,которая подходит и по дизайну и с названием блога.

      Удалить
  14. Спасибо за такой поучительный пост!!! Пригодится, думаю.

    ОтветитьУдалить
  15. Девочки, спасибо большое!!!! Мы еще обязательно порадуем вас интересными статьями.

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

    ОтветитьУдалить
  17. Подскажите, пожалуйста, почему у меня боковины получаются по 10% страницы с обеих сторон, а у вас в примере по 30%? какой шаблон вы использовали в примере?

    ОтветитьУдалить
  18. Большущее спасибо за все подсказки. Я когда сама пыталась разобраться-ничего не получилось, а с Вашим постом на совсем простом языке, все получилось!!!! Хожу теперь, нарадоваться не могу! Мой блог хоть на блог стал похож! Миллион благодарностей! :) :) :)

    ОтветитьУдалить
  19. девочки, спасибо! только что переодела свой блог и шапку поменяла! теперь красотаааааа! это как новое платье купить :-)

    ОтветитьУдалить
  20. ух ты спасибо за статью, побежала домой с работы пробовать:)

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