Фиксированное боковое меню для Blogger (2 варианта)

Источник: Установка не займёт много времени. Стоит только вставить в нужные строки адреса ваших страниц и их названия. Сначала посмотрите как выглядит каждое меню. Просто скопируйте один из кодов и установите в поле этого редактора, чтобы увидеть результат. 1. Зелёное фиксированное выдвигающиеся меню с красивым эффектом при на ведении. Меню при наведении курсора на панель выдвигается и появляются красивые вкладки. Используя свойства gradient получаем симпатичный эффект при наведении на них. Код <div id="hawkMenu">     <a href="АДРЕС" class="hawkMenuA">Главная</a>         <a href="АДРЕС" class="hawkMenuA">Содержание</a>         <a href="АДРЕС" class="hawkMenuA">Об авторе</a>     <a href="АДРЕС" class="hawkMenuA">Связь</a> </div> <style> #hawkMenu { background: rgb(180,223,91); background: -moz-linear-gradient(-45deg,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); background: -webkit-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); background: -o-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); background: -ms-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); background: linear-gradient(135deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=1 );     position:fixed;     width:210px;     left:-180px;     transition-duration:1.0s;     border-radius:15px; } #hawkMenu:hover {     left:-10px; } .hawkMenuA {     font-f     text-decoration:none;     color:#000;     border-radius:10px;     width:140px;     margin-left:25px;     padding:5px;     display:block;     background: rgb(191,210,85); background: -moz-linear-gradient(-45deg,  rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1))); background: -webkit-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); background: -o-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); background: -ms-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); background: linear-gradient(135deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=1 );     margin-top:5px;     margin-bottom:5px; } .hawkMenuA:hover {     background: rgb(180,221,180); /* Old browsers */ background: -moz-linear-gradient(-45deg,  rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */ background: linear-gradient(135deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ }</style> По необходимости добавляйте ещё пункты меню, соответственно, меняя адреса и названия страниц на свои <a href="АДРЕС" class="hawkMenuA">Об авторе</a> 2. Цветное боковое меню с лёгким движением вкладок и красивым эффектом. Код <div class="menuHolder2"> <ul class="menu2"> <li><a href="АДРЕС" class="red">вкладка1</a></li> <li><a href="АДРЕС" class="orange">вкладка 2</a></li> <li><a href="АДРЕС" class="yellow">вкладка 3</a></li> <li><a href="#АДРЕС" class="green">вкладка 4</a></li> <li><a href="#АДРЕС" class="blue">вкладка 5</a></li> <li><a href="#АДРЕС" class="indigo">вкладка6</a></li> <li><a href="АДРЕС" class="violet">вкладка 7</a></li> </ul> <div class="shadow"></div> <style> .menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;} .menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9); -o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9); } ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;} ul.menu2 li {margin:5px 0 0 0;} ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); -webkit-border-top-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius:0 10px 10px 0; -o-border-radius:0 10px 10px 0; border-radius:0 10px 10px 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } ul.menu2 li a.red {background:#a00;} ul.menu2 li a.orange {background:#da0;} ul.menu2 li a.yellow {background:#aa0;} ul.menu2 li a.green {background:#060;} ul.menu2 li a.blue {background:#00a;} ul.menu2 li a.indigo {background:#2b0062;} ul.menu2 li a.violet {background:#682bc2;} ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;} ul.menu2 li a.red:hover {background:#c00;} ul.menu2 li a.orange:hover {background:#fc0;} ul.menu2 li a.yellow:hover {background:#cc0;} ul.menu2 li a.green:hover {background:#080;} ul.menu2 li a.blue:hover {background:#00c;} ul.menu2 li a.indigo:hover {background:#5b1092;} ul.menu2 li a.violet:hover {background:#8a2be2;} </style> Так же как и в первом варианте делайте необходимые изменения. Убирайте или добавляйте вкладки меню. Устанавливайте код понравившегося бокового меню в гаджет HTML/JavaScript во вкладке дизайн в любое место макета блога. Чтобы меню было на правой стороне.Во втором коде нужно вот в этом участке поменять float:left; на float:right; .menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;} .menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;