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

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

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

Сайт автора: Galina Dietrih - Accessories for Life

 

 

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

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

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

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

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

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

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

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

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

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

Таким же образом создаем остальные элементы будущего меню. Осталось их собрать вместе и добавить в блог. Для этого создаем новое сообщение, добавляем в нем совершенно как обычно (как будто пишем пост в блог) свои кнопки, компонуем их, пока не удовлетворимся результатом. При добавлении созданных нами картинок, не забываем выбирать "исходный размер". После чего на каждую кнопку ставим ссылку. Как это сделать, не заходя в html-код, рассмотрено в уроке создания каталога.

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Вы можете авторизоваться при помощи следующих социальных сетей и сервисов:

               


Защитный код
Обновить

Рекомендуемые статьи

Мастер-классы

меню

Мы в соцсетях и группах

 Мы в соцсетях и группах Мы в соцсетях и группах Мы в соцсетях и группах Мы в соцсетях и группах

 Мы в соцсетях и группах Мы в соцсетях и группах Мы в соцсетях и группах Мы в соцсетях и группах

 Мы в соцсетях и группах Мы в соцсетях и группах

пасхальные поделки своими руками

Go to top

© 2010-2018 Мастера Рукоделия

Разрешено копирование с указанием активной ссылки на источник.

 

Продолжая использовать наш сайт, вы даете согласие на обработку файлов cookie, пользовательских данных (сведения о местоположении; тип и версия ОС; тип и версия Браузера; тип устройства и разрешение его экрана; источник откуда пришел на сайт пользователь; с какого сайта или по какой рекламе; язык ОС и Браузера; какие страницы открывает и на какие кнопки нажимает пользователь; ip-адрес) в целях функционирования сайта, проведения ретаргетинга и проведения статистических исследований и обзоров. Если вы не хотите, чтобы ваши данные обрабатывались, покиньте сайт