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



Установка и оформление меню для блога с использованием гаджета Список Ссылок


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

Смотрю, есть же у нас гаджет Список ссылок и думаю, зачем нам  вставлять сторонние коды меню в свои блоги, когда с помощью этого гаджета мы сможем создать и оформить  как вертикальное, так и горизонтальное меню. 

Тем более, что этот гаджет можно добавлять неограниченное количество раз, то есть можно создать меню ссылок своего блога, меню ссылок партнерских программ и даже ярлыков. Интересно ? Тогда давайте обо всем по порядку.

Первое: нам надо добавить этот гаджет в макет своего блога. В дизайне нажимаем добавить гаджет и ищем Список ссылок

Как добавить гаджет Список ссылок

Нажимаем на название гаджета и увидим новую вкладку

Как добавить адреса ссылок, изменить или удалить ссылку

Здесь мы и будем добавлять наши ссылки. В верхнее поле пишем название гаджета: меню, полезные ссылки, это интересно и.т.д. Вписываем название ссылки, вставляем URL адрес и нажимаем добавить. Добавляете все ссылки, которые Вы хотите видеть в создаваемом нами меню.

Обратите внимание, что слева можно удалить ссылку (Delete) и изменить (Edit). Так же есть стрелочки вверх и вниз для удобного расположения ссылок. При необходимости сверху можно настроить количество отображаемых ссылок, то есть добавляете к примеру 15, а настраиваете для отображения в гаджете 10. После всех настроек не забудьте нажать Сохранить, расположите в удобном месте макета блога. Гаджет можно установить как в боковую панель, так и под заголовок блога.

А теперь займемся оформлением меню, а то как то вид не вдохновляет, у всех почти одинаково, есть небольшие различия (зависит от шаблона). И как Вы уже догадались, оформлять будем с использованием CSS стилей. Оформляйте как хотите, тут уж зависит от Вашей фантазии. Итак, поехали на урок оформления: узнайте ID гаджета, обычно это LinkList1 или 2. Как узнать ID виджета, читайте в моем посте как изменить фон боковых панелей блога Blogspot.

В черновике блоггер нажимаем шаблон. Обязательно делайте резервную копию. Далее жмем изменить шаблон, рядом с самой первой стрелкой находим строку <b:skin>...</b:skin>, нажимаем на стрелку, нам надо развернуть шаблон. Не спеша прокручиваем вниз, и выше строки ]]></b:skin вставляем код CSS

/* Sidebar Content */
#LinkList1 li{
height:30px
background:#000000;
border:dotted 1px #ff9900;
border-radius:7px;
margin-right:8px;
list-style-type: none;
padding: 16px 0px;
width:auto;
}
#LinkList1 ul{
background:#ff9900;
list-style:url("http://s019.radikal.ru/i619/1407/b0/7a11a681c192.gif");
border:outset 2px #000000;
border-radius:7px;
text-align:center;font-size:12px;
width:auto;
}

Верхняя часть кода-это внешний вид оформления меню (li). Выделенное красным ID виджета; синим-высота вкладки; лиловым-цвет внешнего фона; голубым-форма, размер, цвет и радиус закругления углов вкладки; margin-right:8px-отступ ссылки справа. Если установите гаджет в боковую панель слева, измените right на left; padding:16px 0px-положение ссылки сверху и снизу. И ширину я установила auto (автоматическая установка).

С оформлением ссылок (ul) я думаю разберетесь. Там все точно так же: цвет фона вкладки; форма, размеры, закругление границ рамки. Можно настроить размер шрифта.

Во многих шаблонах этот гаджет списка ссылок устанавливается с маркером. Чтобы его убрать надо вставить в код такую строку: list-style-type: none; (в коде у меня выделено оранжевым).

Посмотрите что у меня получилось

Как удалить из гаджета список ссылок маркеры     
Без маркера
Как вставить в меню изображения вместо удаленных маркеров
С иконкой вместо маркера
На скриншоте немного темновато, ниже дам ссылку демо блога, посмотрите оформление. Слева в меню у меня маркеры удалены. Вместо них можно вставить изображение, желательно размер 16х16px; Для этого в код вставляем строку (выделено фиолетовым). Вам надо будет вставить URL адрес своей картинки, пример на скриншоте справа. Можно вставить фавикон, иконки по ссылке внизу на этой странице. Выбирайте иконки с прозрачным фоном, они там есть.

А теперь горизонтальное меню: добавляете гаджет списка ссылок, устанавливаете под заголовок. В шаблон-изменить шаблон (действия такие же, что и в первом меню) вставляете CSS стили

/* Sidebar Content */
#LinkList2 li{
height:35px;
background:#000000;
border:dotted 1px #f00;
border-radius:35px;
margin-right:8px;
width:auto;
}
#LinkList2 ul{
background:#000000;
border:dotted 2px #f00;
border-radius:35px;
text-align:center;font-size:12px;
list-style:url("http://s006.radikal.ru/i213/1407/24/3e2d8dd201b0.gif");
width:auto;
}

Посмотрите демо
Настройки те же самые. Если изображение в меню не надо, удалите строку, выделенную фиолетовым. Обратите внимание, что ID гаджета LinkList2. 

Вы можете оформленное горизонтальное меню перетащить в боковую панель. Прекрасно устанавливается. Может надо будет только настроить положение ссылок и отступ от края.

Как установить и оформить гаджет списка ссылок

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

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

Вы сможете так же воспользоваться некоторыми настройками гаджета списка ссылок в дизайнере шаблонов и после вставки стилей CSS.

Теперь о Ярлыках. У Вас каждому сообщению блога должен быть присвоен ярлык. Для начала установите гаджет ярлыки в боковую панель. Затем нажимаете к примеру по ярлыку гаджеты, с адресной строки браузера копируете URL адрес, и вставляете в гаджете списка ссылок. Так у Вас появится ссылка с названием гаджеты или виджеты. Смотрите на скриншоте

Как вставить адрес ярлыков в гаджет списка ссылок

Справа у меня установлен гаджет Ярлыки. Нажала по ссылке, открылась страница гаджетов. Точно так же у Вас, когда добавите адреса ярлыков в список ссылок, посетители перейдут на страницу ярлыка. 

Сегодня у меня вся информация. Пишите отзывы, делитесь с друзьями в социальных сетях. Всего Вам доброго и до новых встреч. Творческих Успехов в оформлении Ваших блогов !





Автор статьи ✎ Olga Protasova Выпуск ✹ 7/03/2014 Ярлыки ►


Открыть комментарии →

6 коммент. :

  1. Ольга, да.Многие забыли про этот гаджет. Он очень удобный. Ты молодец-красиво всё.

    ОтветитьУдалить
    Ответы
    1. Спасибо Вика. Гаджет действительно отличный, с использованием CSS оформляй как хочешь. А мы вставляем не подъемные коды в шаблоны, HTML/LavaScript, а здесь с помощью небольших настроек оформления можно получить ничем не хуже оба вида меню.

      Удалить
  2. Вот за что люблю блоггер так это за такой пластичный шаблон. Не везде так может получиться.

    ОтветитьУдалить
    Ответы
    1. Вика согласна, зная скромненько HTML код и проявив немного фантазии, можно оформить дизайн ничем не хуже шаблонов Wordpress, а они действительно у них замечательные, даже бесплатные. Но в наших силах, было бы желание, оформить блог так, что сразу и не подумаешь, что это шаблон блоггер. Тем более, как ты правильно подметила, шаблон пластичный.

      Удалить
  3. Олечка, спасибо! Очень необходимо!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста Татьяна, обращайтесь.

      Удалить

Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь в меню Генератором преобразования HTML кода.

 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *