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

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

Готовые шаблоны блогов в формате *.xml

14 комментариев :

  1. ОТличная статья! Многим пригодится) Я вот таким же образом у себя шаблоны устанавливала)

    ОтветитьУдалить
    Ответы
    1. Лиана, спасибо!!! У тебя в блоге здорово - мне понравилась идея и оформление)))) А я вот развлекаюсь вручную)))) Правда до конца не сделала - эксперименты ставлю))))))

      Удалить
  2. Натусь, я и в скрап-клубе написала и здесь пишу, что твои статьи - замечательное подспорье)) я с удовольствием буду пользоваться сама, потому что многое - 98% статьи - для меня новая полезная информация! Пошаговая!!!!! Спасибо тебе большое!

    ОтветитьУдалить
    Ответы
    1. Надюша, спасибо!!! Я там читала)))))

      Удалить
  3. Наталь, класс, а для такого лузера как я - напиши плиз как сделать резервную копию своего блога

    ОтветитьУдалить
    Ответы
    1. Наташа, в Ночных скраперах есть http://scrap-fabrica.blogspot.com/2012/12/blog-post_20.html мы хотели, но просто забыли воткнуть ссылку на их пост. Почитаешь, если возникнут вопросы, то спрашивай.

      Удалить
    2. Спасибки, сейчас почитаю

      Удалить
  4. Наташа, для меня это немыслимо и не для моего ума. Я всегда прошу сестру и она мне меняет обложку в блоге, я сама на это не способна))))

    ОтветитьУдалить
    Ответы
    1. )))))) Теперь можешь и сама попробовать)))

      Удалить
    2. Нет. я рисковать не буду))))

      Удалить
    3. ))))) Бэкап делай или на тестовом блоге тренируйся)))))))))

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

    ОтветитьУдалить
  6. Спасибо!!! Не бойся - бэкап всем нам в помощь))) Но на счет подходящего я согласна - готовые шаблоны в большинстве своем заточены немного под другую проблематику. Это скорее личные блоги, а не рукодельные. Хотя предыдущее оформление у меня было шаблонное. Плюс, если у тебя блог давно и куча гаджетов, то надо еще подобрать правильный шаблон, чтобы не слишком много переделок потом было.

    ОтветитьУдалить
  7. Натусик, спасибо тебе огромное за статью для особо одарённых таких, как я! Делала пошагово: прочитала-пошла к себе-сделала, прочитала-сделала. В итоге благодаря тебе и НаталиВин (она мне отредактировала коллаж и подогнала по длинне блога шапку)-я установила новенькую шапку в своём бложике! Низко кланяюсь тебе Натусь, ты очень доступно объясняешь, ты- прирождённый ПРЕПОД!!!!!!

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