Простое горизонтальное меню для 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=»http://seo-aspirant.blogspot.com/2009/08/blog-post_19.html»>название 1 ссылки</a></li> <!— vasi ssilki —>
<li><a href=»http://seo-aspirant.blogspot.com/2009/09/sape-ucoz.html»>название 2 ссылки</a></li>
<li><a href=»http://seo-aspirant.blogspot.com/2009/09/sexcash.html»>название 3 ссылки</a></li>
<li><a href=»http://seo-aspirant.blogspot.com/2010/01/blog-post_13.html»>название 4 ссылки</a></li>
<li><a href=»http://seo-aspirant.blogspot.com/2009/08/blog-post_24.html»>название 6 ссылки</a></li>
<li><a href=»http://seo-aspirant.blogspot.com/2009/11/wtk.html»>nazvanie 6 ssilki</a></li>
<li><a href=»http://seo-aspirant.blogspot.com/2009/08/blog-post_5609.html»>название 7 ссылки</a></li>
<li><a href=»http://seo-aspirant.blogspot.com/2010/01/blog-post_5634.html»>название 8 ссылки</a></li>
<li><a href=»http://seo-aspirant.blogspot.com/2010/01/seo-aspirant.html»>название 9 ссылки</a></li>
</ul>
</div>
</center>

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

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

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

ИЛИ ПОДДЕРЖИ АВТОРА ФИНАНСОВО:

Поддержать на Патреоне

Статьи из рубрики:

Хотите оставить комментарий к статье "Простое горизонтальное меню для Blogspot"?
  • Krasotkin_d

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

  • Olyasozera2

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

  • Natalya

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

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

      • Natalya

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

        • Влад Хасанов

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

  • Konstantin

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

  • Sergey

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

  • Алла

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

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

Анонсы

RSS-лента


Подписаться в Facebook


Подписаться в ВК


Следуй за мной в Twitter



Получать на email:

Я зарабатываю на
Cityads - партнёрская система с оплатой за результат (CPA). Лью покупной и "бесплатный" трафик со своих и чужих сайтов.
Admitad - партнёрская сеть, изначально ориентированная на e-commerce.
SalesDoubler - украинская CPA-сеть №1.
Gogetlinks - биржа ссылок. Продаю дорогие "вечные" ссылки со своих качественных сайтов.
Kwork - биржа фриланса: всё по 500 рублей.
PokerStrategy - играю в покер. Просто хобби.