www.rookee.ru

Простое горизонтальное меню для Blogspot

Горизонтальное менюПродолжаю рубрику по Blogspot. Сегодня расскажу, как сделать простое горизонтальное меню для удобной навигации по блогу. Вариант, который будет описан ниже, является самым простым внедрением горизонтального меню и может быть использовано на абсолютно любой платформе с поддержкой CSS. У платформы blogger от Гугла для этого есть гаджет “HTML/JavaScript“.

Техническая часть для blogspot:
1. Создаём в нужном нам месте шаблона гаджет HTML/JavaScript;
2. Вставляем в него следующий код:

<center>
<style>
<!–
div#menunav {
float: left;
border-top: 1px solid #bbbbbb; /* граница сверху */
border-bottom: 1px solid #bbbbbb; /* граница снизу */
font-size: 14px; /* размер шрифта */
background-color: #bbbbbb; /* цвет фона меню */
padding: 0 0 0 5px; /* левый отступ кнопок */
margin: 5px 0;
}
div#menunav ul {
margin: 0px;
padding: 0px;
}
* html div#menunav ul {
float: left;
border-left: 1px solid #bbbbbb; /* левая вертикальная черта к ul */
margin-left: 15px;
}
* html div#menunav a {
display: block;
}
div#menunav li {
float: left;
list-style-type: none; /* без маркеров списка */
background-color: #464451; /* цвет кнопки до наведения */
border-right: 1px solid #bbbbbb; /* разделительные линии между li */
}
div#menunav li:first-child {
border-left: 1px solid #bbbbbb; /* первая вертикальная линия меню */
}
div#menunav a {
text-decoration: none; /* без подчёркивания ссылок */
padding: 0px 10px; /* отступы сверху и снизу */
color: #bbbbbb; /* цвет шрифта */
}
div#menunav a:hover {
color: #ffffff;
}
div#menunav li:hover {
background-color: #45161c; /* цвет кнопки после наведения */
}
/*powered by seo-aspirant*/
–>
</style>
<div id=”menunav” style=”width: 970px;”> <!– shirina menu –>
<ul>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/08/blog-post_19.html”>название 1 ссылки</a></li> <!– vasi ssilki –>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/09/sape-ucoz.html”>название 2 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/09/sexcash.html”>название 3 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2010/01/blog-post_13.html”>название 4 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/08/blog-post_24.html”>название 6 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/11/wtk.html”>nazvanie 6 ssilki</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2009/08/blog-post_5609.html”>название 7 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2010/01/blog-post_5634.html”>название 8 ссылки</a></li>
<li><a href=”https://seo-aspirant.ru/seo-aspirant.blogspot.com/2010/01/seo-aspirant.html”>название 9 ссылки</a></li>
</ul>
</div>
</center>

3. Редактируем код:
Сразу нужно сделать отступление по коду для новичков. То, что находится между /* … */ никак не будет влиять на гаджет. Это пояснения, чтобы вам было проще настроить меню.
Теги в начале и конце кода “center” сделают выравнивание вашего меню по центру страницы.
/* granica sverxy */ – первое значение “1px” показывает, сколько пикселей будет отступ, второе “#bbbbbb” – это цвет границы. Аналогично можно поменять и остальные переменные.
Не забудьте заменить в коде https://seo-aspirant.ru/seo-aspirant… на адрес своего блога. Т.к. в данном случае мы редактируем всего лишь код отдельного элемента, то шаблон блога сохранять не обязательно, ведь гаджет можно в любое время удалить.

Чтобы внести изменения нужно обладать базовыми знаниями CSS, ну или просто экспериментировать с переменными.

ПОНРАВИЛСЯ ПОСТ? ПОДЕЛИСЬ ССЫЛКОЙ С ДРУЗЬЯМИ!

Получать новые публикации по электронной почте:

Skyeng

СТАТЬИ ИЗ РУБРИКИ:

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

10 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Krasotkin_d
Krasotkin_d
11 лет назад

Отличная статья! Уже неделю хотел сделать у своего блога (http://krasotkin-d.blogspot.com) меню, на форумах никто не смог помочь. Хорошо что эту статью нашёл!

Olyasozera2
Olyasozera2
10 лет назад

почему-то у меня меню показывается без учета css, только ссылки текстовые, что можнои сделат? может отдельно надо css добавит в шаблон? а как?

Natalya
Natalya
10 лет назад

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

seo-aspirant
10 лет назад
Ответить на  Natalya

Можно. Я на блоге seo-aspirant.blogspot.com именно его и использую. Просто точно так же внутрь меню вставляете конструкцию … и т.д.

Natalya
Natalya
10 лет назад
Ответить на  seo-aspirant

Ясно. Спасибо большое. Все голову ломала по незнанию. А менюшка понравилась, ставится в блоггер просто, + настраивать удобно через виджет.

Влад Хасанов
Влад Хасанов
6 лет назад
Ответить на  Natalya

Подскажите пожалуйста, а куда вставлять чтобы было подменю?

Konstantin
Konstantin
10 лет назад

Пожалуйста объясните подробно  как сделать выпадающее меню а то чот не получается(

Sergey
Sergey
8 лет назад

Здравствуйте! С данным кодом, меню должно оказаться по центру? У меня к сожалению оно идёт слева как и всегда…( Как можно это исправить?

Алла
Алла
7 лет назад

Спасибо. Пригодилось. Да вот я точно чайник. Так хочется цвет шрифта поменять, кнопок, а у меня не получается. Я, например, меняю #464451 на #0000FF, а все остается на своих местах? Что я делаю не так?

seo-aspirant
7 лет назад
Ответить на  Алла

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

10
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x