Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
воскресенье, 15 апреля 2018 г.

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

 В свой блог можно добавить простое горизонтальное меню навигации , изображённое на картинке.
Здесь оно показано без цвета, который, как и отступы, подбираются индивидуально для каждого сайта.
Для установки необходимо выполнить следующие несложные действия:
  1. В админке кликните "Шаблон", затем "Изменить HTML".
/* 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.
Также можете посмотреть другие горизонтальные меню навигации(http://ob-bl.blogspot.com/2014/01/horizont-menu01.html) и выбрать что-то из них.



0 коммент.:

Отправить комментарий