суббота, 24 декабря 2011 г.

Полностью меняем имидж блога по дизайнеру шаблонов блоггера

 Как говорится, не было бы печали... У меня сбился шаблон блога "Радость творчества  SHISHKINA"-боковые панели встали в середину поля и пришлось несколько дней помучиться. И все же я докопалась до истины! Оказывается, это не трудно совсем, (только надо набраться терпения и желания) ведь у Bloggera  теперь есть "Дизайнер шаблонов"!!!
Но пробовала я все эти махинации на другом блоге и, когда убедилась, что получается нормально, то  исправила в основном рукодельном блоге!!!
Итак, будем менять шаблон на 3-х колоночный и делать новую шапку блогу. А)Делаем 3-х колоночный шаблон своему блогу через "Дизайнер шаблонов блоггера":
1-жмем на "Новое сообщение"
2.Дальше-"Дизайн"
3.Вверху слева-"Дизайнер шаблонов"
4. Выбираем  "Простая"
5.Теперь жмем  на "Дизайн"(он 1-ый во 2-м горизонтальном ряду схем-шаблонов)
6.Далее самостоятельно на ваш вкус настраиваем фон, параметры шаблона-ширину боковых панелей и поля для письма. И продолжение....
Б).А чтобы блог был еще красивее, надо вставить "Одежку для блога"-т.е. боковые стороны
 Только здесь надо иметь ввиду,что нам в данном случае надо брать код с 3-х колоночный ( он не везде дан!), а не 2-х колоночный.Там, где помещены 3 окошечка с кодами:
1.окошечко-с 2-х колонным
2.(ниже, под 1-м).-с 3-х колонным
3.-картинка для вставки в шапку (в верх )блога. 
Вначале берем пункт №2-3-х колоночный, затем когда будем работать с шапкой блога, то скопируем картинку на рабочий стол или в свою папку.
  и совсем в конце можно усовершенствовать верхнюю часть блога-его шапку с названием.
Можно взять одежку для блога     здесь ,  здесь  здесь  здесь  здесь  тут   тут  тут   тут  .
Как это сделать:

1- идете в свой блог, нажимаете кнопку "Новое сообщение" {верхнем правом углу}
2-
Нажмите кнопку "Дизайн", вверху, где заголовок (шапка блога), под ним следующий гаджет- «Добавить гаджет»
найти "HTML / Java Script" и жмете знак "+"
4.Открывается пустой экран  HTML /
Java Script. Теперь скопируйте и вставьте HTML-код , приведенный ниже:
<style type="text/css">
body {background-image: url("direct link"); background-position: center; background-repeat: no-repeat; background-attachment: fixed; }

5 . Выберите  в этом блоге фон. Скопируйте код под  ним ,например: http://img202.imageshack.us/img202/310/pinkbutterfly.jpg
 его мы будем вставлять вместо слов, написанных  красным шрифтом т.е. между кавычками-" direct link ".
6. Убедитесь, что вы оставили  скобки на месте.
7. Теперь «Сохранить»---,
«Сохранить» --"Просмотр блога" 
и все готово-боковушки на месте! Если не понятно, то об этом же еще здесь
В) Делаем верх блога-шапку с названием блога-заголовок.
Поскольку теперь шапка блога не подходит нам к боковушкам, надо ее менять.  
Есть 2 способа. Вначале общее для обеих способов:
1-Идем в"Новое сообщение"
2.потом- "Дизайн"
3. В гаджете "Заголовок ( справа вверху) жмем на  "Изменить"
4.Теперь способы расходятся в зависимости от вашего выбора : 
а) можно вставить выбранную картинку из комплекта к "боковушкам",
б) можно ее переделать в фотошопе.
а)Вставить выбранную картинку из комплекта к "боковушкам". 
1.В открывшемся окошке в "Название блога"-пишем название своего блога.
 2.Удаляем картинку.
3."Обзор"-вставляем картинку, которую скопировали из комплекта к боковушкам на рабочий стол или в свою папку.
4."Место размещения"-ставим точку напротив слов:"После названия и описания".
"Соханить" -- "Сохранить"- "Просмотреть блог".
Б) второй способ: переделать картинку в фотошопе.
Если вы дружите с фотошопом и хотите добавить в эту картинку что-то свое ( как делать шапку блогу в фотошопе смотрите здесь-
1.Пишем на ней название своего блога и слова- описание блога (девиз, пожелания ,обращение...), украшаем ее по своему усмотрению.
2. Идем "Панель инструментов"
2."Новое сообщение"--"Дизайн"-"Заголовок"--"Изменить"
3.Название своего блога в графе "Название блога" писать все-равно надо!
4."Описание блога"-ничего не пишем, оставляем пустое окно.
5."Обзор"-вставляем свою картинку.
:. "Место размещения"-ставим точку, где написано "Вместо заголовка и описания"(2-я строчка).
7. "Сохранить"--"Сохранить"-- "Просмотреть блог".

Вот здесь Блоггер объясняеи, как работать с "Редактором шаблонов":
 Редактор шаблонов Blogger
 позволяет легко и быстро настраивать внешний вид блога. Благодаря широкому выбору шаблонов, изображений, цветов и вариантов дизайна столбцов вы сможете выразить себя в своем блоге. Чтобы открыть этот инструмент, откройте страницу Дизайн | Редактор шаблонов.
В обновленном интерфейсе нажмите на меню рядом со значком нового сообщения и выберите Шаблон. Здесь вы сможете указать и настроить шаблон своего блога.
В процессе работы с редактором шаблонов можно просматривать внесенные изменения. Для этого нажмите переключатель Развернуть окно предварительного просмотра, который находится под панелью инструментов редактора шаблонов Blogger. После настройки внешнего вида блога можно применить внесенные изменения. Для этого нажмите кнопку Применить к блогу, расположенную в правом верхнем углу окна редактора шаблонов.
Чтобы приступить к работе с редактором шаблонов Blogger, выберите подходящий шаблон блога из списка профессионально оформленных шаблонов. Каждый из шаблонов представлен в виде уменьшенного изображения. При нажатии на это изображение под ним появятся различные варианты оформления выбранного шаблона. При создании нового шаблона все изменения, внесенные в предыдущий шаблон, будут утеряны. После выбора шаблона можно приступить к настройке внешнего вида блога.
В редакторе шаблонов всегда можно увидель текущее оформление блога, взглянув на уменьшенное изображение Сейчас в блоге на панели управления редактора шаблонов. А нажав на это изображение, можно вернуть в редакторе текущий шаблон блога.

Фон

После выбора шаблона можно изменить его внешний вид. С помощью редактора шаблонов Blogger можно выбрать цвет фона или фоновое изображение для блога, а затем выбрать подходящий цвет из цветовой палитры. Чтобы приступить к настройке фона, нажмите на уменьшенное изображение в разделе Фоновое изображение.
Одной из уникальных функций редактора шаблонов является возможность изменения цвета прозрачных фоновых изображений. В правом верхнем углу таких изображений имеются шашечки.
После выбора изображения можно изменить цвет его фона. Для этого нажмите на элемент Основной цвет темы и выберите подходящий цвет.
Цвет фонового изображения можно изменить только в том случае, если оно является прозрачным. А если у выбранного шаблона серый фон, его цвет изменить также невозможно.
Кроме выбора и настройки фонового изображения для блога можно выбрать цвет темы, который будет применяться к различным элементам блога, включая текст и ссылки. Это можно сделать, изменяя Основной цвет темы или Предлагаемые темы. При изменении цвета темы для блога будут изменены и цвета всех элементов выбранного шаблона.
Примечание. Если фоновое изображение не является прозрачным, после выбора темы будет изменена цветовая палитра текста в блоге.
Примечание. Дополнительная информация о добавлении собственного фонового изображения находится в статье, посвященной добавлению персонализированного кода CSS в блог.

Дизайн

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

Изменение ширины

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

             Всем самого доброго, светлого и прекрасного!                                  Ga-lina

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

Людмила комментирует...

Спасибо за такое подробное объяснение! Как - нибудь попробую!

Elita комментирует...

Лилиана, подскажите пожалуйста , а как вставлять картинку сайта, как у вас идет по правому краю? Я пробовала через "вставить картинку", но получается либо очень маленький, либо очень большой размер. я просто выбирала урл картинки с того сайта, может есть какой то иной способ?Благодарю

Лилиана комментирует...

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