Горизонтальное меню навигации в Blogger

Горизонтальное меню навигации в блоге на Blogger.


  В свой блог можно добавить простое горизонтальное меню навигации , изображённое на картинке.
Здесь оно показано без цвета, который, как и отступы, подбираются индивидуально для каждого сайта.
Для установки необходимо выполнить следующие несложные действия:
  1. В админке кликните "Шаблон", затем "Изменить HTML". Найдите с помощью комбинации клавиш "Crtl+F" код:

/* Header
----------------------------------------------- */

  2. Добавьте ниже этого кода вот такой:

/* ----- Вставлено для горизонтального меню ----- */
#menu ul li
{
list-style-type: none;
display:inline;
padding:0px; /* Размер внутреннего отступа */
margin:10px; /* Размер внешнего отступа */
border:0px solid; /* Толщина и вид рамки меню */
}
#menu li a{
color:#DFFFED; /* Цвет кнопки меню */
}
#menu li a:visited {
color: #57E964; /* Цвет кнопки меню посещённой страницы */
}
#menu li a:hover {
color: #F88017; /* Цвет кнопки меню при наведении указателя */
background: #FFFF66; /* Фон кнопки меню при наведении указателя */
}
/* ----- Конец вставки для горизонтального меню ----- */


  В этом коде можно менять значения для отступов, рамки и цветовой гаммы. Они выделены красным цветом. Номер цвета расположен сразу же после знака # (решётка).
  Подобрать цветовую гамму для вашего блога можно здесь.
  Делать правки в коде имеет смысл после прохождения пункта 6, когда создадите первичное горизонтальное меню навигации.

  3. Сейчас в шаблоне нужно найти такой фрагмент кода:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>


  4. Этот код поменяйте на следующий:

/* ----- Вставлено для горизонтального меню вместо
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> ----- */
<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>
/* ----- Конец вставки для горизонтального меню ----- */

Сохраните шаблон и пройдите в «Элементы страницы»

  5. Ближе к заголовку, нажимте «Добавить гаджет» - HTML/JavaScript

  6. Название гаджета оставьте пустым, а в тело добавьте такой код:

<div id='menu'>
<ul>
<li><a href="Ваш URL">Главная страница</a></li>
<li><a href="
Ваш URL">Реклама на блоге</a></li>
<li><a href="
Ваш URL">Обо мне</a></li>
<li><a href="mailto:Ваш E-Mail Адрес">Контакты</a></li>
</ul></div>



  Первичное горизонтальное меню навигации создано. Теперь надо заменить участки кода, выделенные красным цветом, на желаемые значения. Сохраните шаблон.
Можно также править код шаблона, описанный в пункте 2.
  Также можете посмотреть другие горизонтальные меню навигации и выбрать что-то из них.



1 комментарий:

  1. Спасибо! Хорошее меню. Теперь у меня на сайте, только для себя добавлено небольшое закругление рамки border-radius: 3 3 3 3; и цвет.

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