Изящное горизонтальное меню для блога blogspot



Установка горизонтального меню в блог 


Здравствуйте дорогие гости и читатели моего блога. Сегодня разрешите представить Вам изящное горизонтальное меню для Ваших блогов на платформе Blogspot. Как выглядит меню, смотрите на скриншоте. Кто желает посмотреть в живую, слетайте в тестовый блог, внизу страницы.

Установка в блог blogspot горизонтального меню


<style>

#RWGmnuqw {
font-family:'Open Sans', Helvetica, Arial, sans-serif;
right:0;
border-top:2px solid #000;
border-bottom:2px solid #000;
width:100%;
overflow:hidden;
padding:0;
}

#RWGmnuqw ul {
list-style:none;
margin:0;
padding:0;
}

#RWGmnuqw ul li.kiri {
-moz-border-radius:0 0 0 3px;
-khtml-border-radius:0 0 0 3px;
-webkit-border-radius:0 0 0 3px;
border-radius:0 0 0 3px;
}

#RWGmnuqw ul li.kanan {
-moz-border-radius:0 0 3px;
-khtml-border-radius:0 0 3px 0;
-webkit-border-radius:0 0 3px 0;
border-radius:0 0 3px 0;
}

#RWGmnuqw ul li {
font-weight:700;
width:11%;
float:left;
text-align:center;
border-right:1px solid #333;
background:#04BDFA;
border-left:none;
}

#RWGmnuqw ul li a {
display:block;
color:#FFF;
line-height:18px;
font-size:15px;
padding:19px 0;
text-decoration:none;
}

#RWGmnuqw ul li a:hover {
text-decoration:none;
color:#fff;
cursor:pointer;
background:#005C91;
}

#RWGmnuqw ul li.home {
float:left;
height:56px;
background:#005C91;
width:11.1%;
border-right:1px solid #333;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWGmnuqw ul li.home a {
color:#FFF;
padding:18px 0;
}

#RWGmnuqw ul li.home a:hover {
color:#fff;
background:#04BDFA;
-moz-border-radius:0 0 3px 3px;
-khtml-border-radius:0 0 3px 3px;
-webkit-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
}

#RWG-ioio {
background:transparent url(http://2.bp.blogspot.com/-HSeaU9S9uDQ/Ui8Hi55sq-I/AAAAAAAAGcA/SSzYE94BN0E/s1600/bg-RWG.png) repeat scroll top left;
max-width:1000px;
width:1000px;
margin:0 auto;
}

</style>





<div id='RWG-ioio'>
<div id='RWGmnuqw'>
<ul>
<li class='home'><a href='URL главной страницы'><img alt='home' src='http://4.bp.blogspot.com/-bXprN6k5bUw/Ui8KQss0MVI/AAAAAAAAGcM/iC21zXnkyVw/s1600/homeRWGmnu.png' style='margin-right:10px'/>HOME</a></li>
<li><a href='#'>Об авторе</a></li>
<li class='kanan'><a href='#'>Контакты</a></li>
<li><a href='#' target='_blank'>Генератор</a></li>
<li><a href='#'>HTML</a></li>
<li><a href='#'>Заработок</a></li>
<li><a href='#'>Соц кнопки</a></li>
<li><a href='#'>RSS</a></li>
<li class='kiri'><a href='#'>E-mail</a></li>
</ul>
</div></div>


Настройки :
width:100%;-ширина менюfont-size:15px;-размер шрифта; line-height:18px;-высота меню; '#"-вместо решетки впишите URL адрес ссылки; Контакты-название ссылки; 

Добавлять ссылки здесь не надо, по моему их и так хватает. С цветом я думаю разберетесь. Код добавляете обычным гаджетом: черновик blogger-дизайн-добавить гаджет-Html/JavaScript-вставить-настроить-сохранить. На этом все. Комментируйте, делитесь с друзьями. Всего Вам доброго.




Автор статьи ✎ Olga Protasova Выпуск ✹ 2/28/2014 Ярлыки ►


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

0 коммент. :

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

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

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

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

Имя

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

Сообщение *