Красивое горизонтальное меню с анимацией для Blogger

Меню с анимацией для Blogger

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

Нажмите добавить гаджет Html/JavaScript:

И в его поле добавьте такой код:

<style type="text/css"> .exespotlightmenu{ width: 100%; overflow:hidden; } .exespotlightmenu ul{ margin: 0; padding: 0; font: bold 14px Verdana; /* font style and size */ list-style-type: none; text-align: center; /* "left", "center", or "right" align menu */ } .exespotlightmenu li{ display: inline-block; position:relative; padding: 5px; margin: 0; margin-right: 5px; /* right margin between menu items */ } .exespotlightmenu li a{ display:inline-block; padding: 5px; min-width:50px; /* horizontal diameter of spotlight */ height:50px; /* vertical diameter of spotlight */ text-decoration: none; color: black; margin: 0 auto; overflow:hidden; -moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */ -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .exespotlightmenu li:hover a{ color: white; background: #a71b15; /* background color of spotlight */ -webkit-border-radius: 50%; /* large radius to create circular borders */ -moz-border-radius: 50%; border-radius: 50%; } .exespotlightmenu li a exespan{ position:relative; top:35%; /* move text down so it appears centered within menu item */ } </style> <br /> <div class="exespotlightmenu"> <ul> <li><a href="##########"><exespan>Главная</exespan></a></li> <li><a href="##########"><exespan>О блоге</exespan></a></li> <li><a href="##########"><exespan>Карта</exespan></a></li> <li><a href="##########"><exespan>Архив</exespan></a></li> <li><a href="##########"><exespan>Контакт</exespan></a></li> </ul> </div>
Здесь естественно меняйте названия пунктов меню и вместо решеток вставляйте ссылки на страницы. Сохраните гаджет.