Плавающее меню для блогов Blogspot



Как установить в блог Blogspot плавающее меню


Настройка, оформление, установка плавающего меню в блог BlogspotВсем доброго времени суток. В этой информации дорогие блоггеры мы будем устанавливать плавающее меню в блог.

Меню отлично настраивается, можно оформить под любой дизайн и самое главное, установка с помощью всеми нами любимого Html/JavaScript. 

Плавающее меню всегда на виду у посетителей блога, в любой момент можно перейти по ссылке и прочитать новую информацию. Меню раскрывается при наведении курсором мыши.

Пример плавающего меню можно посмотреть в тестовом блоге:


Итак, кого интересует такое меню для своего блога, копируем код ниже, и вставляем в черновике blogger-дизайн-добавить гаджет. 

<style text-type="CSS">
#bmenu{
position:fixed;
left:5px;
center:0px;
background-color:#3d162e;
border-radius:30px;
-moz-border-radius:30px;
border:1px solid #3d162e;
width:180px;
height:22px;
top:20%;
color:#ffffff;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:3px dotted #00b2a1;
background-color:#f8f8ff;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:12px;}

#bmenu li a:hover{
color:#0e5198;}

#bmenu:hover{
z-index:5;
height:245px;
</style>

<div id="bmenu">
<h3>
Меню блога</h3>
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Карта блога</a></li>
<li><a href="#">Обо мне</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
<li><a href="#">Google</a></li>
<li><a href="#">RSS</a></li>
<li><a href="#">Заработок</a></li>
</ul>
</div>

Основные настройки: выделенное синим-фон меню, радиус закругления углов, размер, форма и цвет окантовки рамки, ширина и высота; лиловым-положение меню-верх-низ; 

голубым-радиус закругления углов, фон, форма, цвет и размер окантовки рамки; фиолетовым-оформление ссылок, размер шрифта, цвет. Это то, что у меня на белом фоне. 

Вместо решеток вставьте Url адреса ссылок, и вместо моих названий впишите названия своих ссылок. 

У меня на сегодня все. Оформляйте, настраивайте, делитесь с друзьями, комментируйте. Всего Доброго.


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


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

0 коммент. :

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


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

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

Имя

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

Сообщение *