magic-2018.ru
Магия, здоровье, дети, мой юрист, туризм, уют, кулинар, красота, авто

Как создать собственные кнопки и меню блога

Как создать собственные кнопки и меню блога

Как создать собственные кнопки и меню блога

Продолжаем цикл уроков по функционалу и дизайну блога.

Сегодня рассмотрим создание меню на боковой панели блога.

Автор: Галина Дитрих

  • Как создать собственные кнопки
  • Как добавить элемент HTML/JavaScript
  • Как объединить кнопки в меню блога

Как создать собственные кнопки и меню блога
Как создать собственные кнопки и меню блога
Как создать собственные кнопки и меню блога

У многих из нас дизайн блога выдержан в конкретной цветовой гамме, и, конечно, хотелось бы, чтобы все остальные элементы дизайна, которые отвечают за функционал блога, были авторскими и не выбивались из шаблона.

Сегодня в качестве примера создания кнопки меню я буду создавать кнопку для «Уроков Blogspot».

Открываем Photoshop, выбираем Файл-Создать:

Как создать собственные кнопки и меню блога

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

Как создать собственные кнопки и меню блога

Выбираем инструмент Горизонтальный текст, нужный шрифт и цвет будущего текста кнопки и, по желанию, украшаем кнопку картинкой или графическим элементом. Получаем, например, следующее:

Как создать собственные кнопки и меню блога

Таким же образом создаем остальные элементы будущего меню.

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

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

Как это сделать, не заходя в html-код, рассмотрено в уроке создания каталога.

Как создать собственные кнопки и меню блога

Как создать собственные кнопки и меню блога

Как создать собственные кнопки и меню блога

Переходим в режим HTML:

Как создать собственные кнопки и меню блога

Копируем весь код. Открываем настройки Blogger, вкладка Дизайн:

Как создать собственные кнопки и меню блога

Нажимаем «Добавить гаджет» (все нужное выделила красными овалами). Открывается следующее диалоговое окно:

Как создать собственные кнопки и меню блога

Поле «Название» оставляем пустым, а в поле «Содержание» вставляем скопированный код нашего меню.

Пост, в которой мы компоновали свое меню, сохраняем как черновик и никогда не публикуем:))) Когда нам понадобится что-то изменить в меню, мы просто зайдем в свой черновик и внесем нужные изменения в режиме дизайна, а не копаясь в коде html.

Комментарии закрыты.