Три варианта горизонтального меню для блоггер



Всем здравствуйте. Три варианта горизонтального меню для блогов блоггер. Меню простое в установке и настройке, для фона можно использовать свое изображение. Смотрим скриншот:

Коды разных вариантов, как установить и настроить меню.

Пример 1. Копируем HTML код 

<style>
#bluemenu { border: solid 1px #39F; background:#64DAFC url(https://lh6.googleusercontent.com/-7AqqOE7ofpk/Ui2rcZ8HbVI/AAAAAAAAGHg/JKehF4xo7iM/h120/bluebg.gif) repeat-x; }
#menublues{ font-size:14px; }
#menublues ul, #menublues li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menublues a{ text-align: center; display: inline-block; font: italic 14px Arial; background: url('https://lh5.googleusercontent.com/-wr04E0lX-Iw/Ui2rcMUXtAI/AAAAAAAAGHs/4pmDipZWAgw/h108/blue.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menublues a:hover, #menublues a.current{ background-position: 0% -60px; color: #fff; }
#menublues a.end{ width:2px; padding-left:0;padding-right:0; }
</style>
<div id='bluemenu'><div id='menublues'>
<a href='#'><i>Главная</i></a>
<a href='#'>Все записи блога</a>
<a href='#'>Виджеты</a>
<a href='#'>Дизайн</a>
<a href='#'>Меню</a>
<a href='#'>Robots txt</a>
<a href='#'>Файл Sitemap</a>
<a href='#'>Сообщество</a>
<a class="end">&nbsp;</a>
</div></div>




Пример 2. Копируем HTML код

<style>
#greenmenu { border: solid 1px #52e052; background:#64DAFC url(https://lh4.googleusercontent.com/-84N8in2YMCc/UjS0YrTZQ7I/AAAAAAAAGJc/fWb8wN23bAg/h120/greenbg.gif) repeat-x; }
#menugreen{ font-size:14px; }
#menugreen ul, #menugreen li{ display: inline; list-style-type: none;padding: 0;margin: 0;border:0;background-image:none; }
#menugreen a{ text-align: center; display: inline-block; font: normal 14px Arial; background: url('https://lh5.googleusercontent.com/-OZYpaCR_6Ho/UjS0YsW2NhI/AAAAAAAAGJY/F0zOGRUg2nA/h108/green.gif') no-repeat left top; padding: 10px 20px; color: #fff; text-decoration: none; }
#menugreen a:hover, #menugreen a.current{ background-position: 0% -60px; color: #fff; }
#menugreen a.end{ width:2px; padding-left:0;padding-right:0; }
</style>
<div id='greenmenu'> <div id='menugreen'>
<a href='#'>Главная</a>
<a href='#'>Содержание</a>
<a href='#'>Связь с автором</a>
<a href='#'>Партнерки</a>
<a href='#'>CSS</a>
<a href='#'>HTML</a>
<a href='#'>HTML5</a>
<a href='#'>Соц сети</a>
<a class="end">&nbsp;</a>
</div></div>




Пример 3. Копируем HTML код

<style>
div.redmenu{ background:#9A0000 url(https://lh3.googleusercontent.com/-zkvIc1a5Oqc/Uiv9v_LY_LI/AAAAAAAAGG0/_pQzW04tfXM/h120/bg1.gif); border:1px solid #000; font-size:14px; }
div.redmenu a{ display: inline-block; padding: 0 20px; background-image: url(https://lh3.googleusercontent.com/-V421OopKYKk/Uiv9wFXb3QI/AAAAAAAAGG8/elEEpjz9NRg/h108/bg.gif);
 color:#fff; text-decoration:none; font:italic 14px Arial; line-height: 32px; }
div.redmenu a:hover, div.redmenu a.current{ background-position:0 -60px; }
div.redmenu a.end{ width:2px; padding-left:0;padding-right:0; }
</style>
<div class='redmenu'>
<a href='#'>Главная</a>
<a href='#'>Контакты</a>
<a href='#'>Карта блога</a>
<a href='#'>HTML</a>
<a href='#'>CSS</a>
<a href='#'>Партнерские программы</a>
<a href='#'>Видео</a>
<a href='#'>Форум</a>
<a class="end">&nbsp;</a></div></div>


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

На все вопросы по установке и настройке отвечу в комментариях. Работает форма для связи. Спасибо за визиты и отзывы, поделитесь с друзьями в социальных сетях. Всем всего доброго.

Рекомендую другие статьи по теме:






Автор статьи ✎ Olga Protasova Выпуск ✹ 3/13/2018 Ярлыки ►


Открыть комментарии →

0 коммент. :

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


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *