miralinks.ru

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

Рубрика: Практика и кейсы | Время на чтение: 4 мин.

Горизонтальное менюПродолжаю рубрику по 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, ну или просто экспериментировать с переменными.

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

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

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

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

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

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

Olyasozera2
Olyasozera2
12 лет назад

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

Natalya
Natalya
12 лет назад

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

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

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

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

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

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

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

Konstantin
Konstantin
12 лет назад

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

Sergey
Sergey
10 лет назад

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

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

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

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

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

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